4-3编程练习检查
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
/*写出CSS样式*/
div{
background-color:#eee;
font-size:2em;
height:5em;
}
p{
text-align:center;
vertical-align: middle;
}
.one{
font-size:2em;
text-align:center;
vertical-align: middle;
}
.two{
text-align:center;
vertical-align: middle;
text-decoration:underline;
color:red;
}
</style>
</head>
<body>
<!--写出html代码-->
<div>
<p><img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg">
<span class="one">CSS层叠样式表</span>
<span class="two">(Cascading Style Sheets)</span>
</p>
</div>
</body>
</html>
请问老师，想问一下，我的图片和文字不垂直居中。 不知道该怎么设置。
正在回答 回答被采纳积分+1
同学你好，问题解答如下：
1.vertical-align不可以继承的，可以继承的样式一般是文本相关的，例如文字颜色，文字大小，行高等。
2.不可以注释，因为text-align: center;是设置水平居中的，去掉之后，内容整体就不会水平居中了。自己可以去掉看看效果就明白了。
（去掉不能水平居中）
3.不是的，你可以看一下老师上次的截图，基线的对齐，并不是互相的。如下图就直观的展示出来，文字的顶线（也就是顶部）与图片的中线是对齐的。所以文字相对于图片来说，是垂直居中对齐了。如果想要图片也相对于文字的中线对齐，那么就需要给图片也设置垂直居中对齐，即图片的中线和文字的中线对相互对齐了。这里可能不好理解，可以自己设置垂直居中，然后去掉某一个元素的居中感受一下效果，可以更直观更容易理解一点哦。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星