行高设置成了和元素高度一样不能垂直居中？
来源：4-3 编程练习
localhost999
2020-06-26 11:44:02
问题：行高设置成了和元素高度一样50px，为什么英文部分(Cascading Style Sheets)还不能垂直居中啊？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
div{
/*display:table;*/
width:100%;
}
p{
/*display:table-cell;*/
text-align:center;
height:50px;
}
.english{
line-height:50px;
/*vertical-align:middle;*/
}
</style>
</head>
<body>
<div>
<p>
<img src="http://climg.mukewang.com/59c21bae000157fa01000059.jpg" alt="css3">
<span class="chinese">CSS层叠样式表</span>
<span class="english">(Cascading Style Sheets)</span>
</p>
</div>
</body>
</html>写回答
2回答
-
同学你好，你是想实现图片与文字都垂直居中吧，比如下面这样的效果：
如果是这样的话，需要如下设置：
之前的答案，只是给你讲了为什么“英文部分”（单独这部分）文字没有垂直居中。
同学可以再试一下。
祝学习愉快！
0 -
好帮手慕久久
2020-06-27
同学你好，由于英文所在的标签是span，而span标签是行内元素，所以它的实际高度会由内容撑开，并不会继承父元素p标签的“height:50px;”，如下：
因此设置行高后，没有垂直居中。可做如下修改：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0h020-06-28
相似问题