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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

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://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"/><span class="one">CSS层叠样式表</span>&nbsp;&nbsp;<span class="two">(cascading style sheets)</span>

   </p>

</div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕夭夭 2019-01-17 18:13:00

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

http://img1.sycdn.imooc.com//climg/5c40551f0001f74217520586.jpg

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

qq__淺唱_0 2019-01-17 15:40:09

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

http://img1.sycdn.imooc.com//climg/5c40315600013a4405430334.jpg

  • 提问者 Alvin24 #1
    你好!为什么在这里不用设置行高和行同等数值 就垂直居中了 就是vertical-align属性决定的吗?
    2019-01-17 15:47:14
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师