Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本的水平和垂直对齐</title>
<style>
/*使用text-align属性设置文本的水平对齐方式:
left:左对齐
right:右对齐
center:居中对齐
justify:两端对齐
*/
div{
width:800px;
border:1px solid red;
font-size:50px;
text-align:center;
}
span{
font-size:20px;
border:1px solid blue;
/* vertical-align设置垂直方向的对齐方式:
baseline:默认值,基线对齐
top:顶端对齐
bottom:底端对齐
middle:居中对齐()
; */
vertical-align:middle;
}
.imageDiv{
margin-top:100px;
}
/*图片放在块元素中,默认也是以基线对齐,导致底部没有重合 */
img{
/*设置垂直对齐方式为底端对齐 */
vertical-align:bottom;
}
</style>
</head>
<body>
<div>你是个人才!so greate <span>太棒了,so nice!</span></div>
<div class="imageDiv"><img src="../../../images/sport.jpg" alt=""></div>
</body>
</html>