老师这个练习正确吗？vertical-align: middle;为什么不是居中呢？

首页课程实战体系课手记专栏慕课教程

来源：4-3 编程练习

Alvin24

2019-01-17 15:25:42

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

div{width: 100%; height: 200px;background-color: #eee;text-align: center;}

p{ line-height: 5em; font-size: 2em; }

p .two{color: red; text-decoration: underline; vertical-align: middle;}

p .one{font-size: 2em;}

</style>

</head>

<body>

<div>

<p>

<img src="http://climg.mukewang.com/59c21bae000157fa01000059.jpg"/><span class="one">CSS层叠样式表</span>  <span class="two">(cascading style sheets)</span>

</p>

</div>

</body>

</html>

写回答

2回答

好帮手慕夭夭

2019-01-17

你好同学 , 能够垂直居中是因为p元素设置了行高line-height: 5em; ,当元素不设置高度的时候 , 行高也能把盒子撑开 ,因为文字行高的上下边距都是一样的 ,此时达到了垂直居中的效果 ,同学可以自己测试一下:

希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .

qq__淺唱_0

2019-01-17

你好同学，代码中你只对.two做了垂直居中，还有.one和img也需要写垂直居中哦，还有建议你div里不要设置高度（height）能够更好的居中显示哦。

hlvin24

h 你好！为什么在这里不用设置行高和行同等数值就垂直居中了就是vertical-align属性决定的吗？

h019-01-17

共1条回复

0 学习 · 36712 问题

查看课程

相似问题

请老师看一下代码，为何还是实现不了水平居中和垂直居中

回答 3

老师请问我的代码是否正确？

回答 1

div包裹了p.实现垂直居中为什么用上一个div无效呢？

回答 5

4-3练习

回答 2

4-3编程练习书写是否正确？为什么我的效果与练习效果有出入？

回答 2

打开慕课网App查看更多内容