为什么设置了行高之后垂直居中就会失效?

为什么设置了行高之后垂直居中就会失效?

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文本样式</title>

        <style type="text/css">

            p{text-align:center;height:150px;line-height:5em; background-color:#eee;}

            .one{font-size:2em;vertical-align:middle;}

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

            .img{vertical-align:middle;}

           /*写出CSS样式*/

        </style>

    </head>

    <body>

        <p>

            <img class="img" src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"/>

            <span class="one">CSS层叠样式表</span>

            <span class="two">(Cascading Style Sheets)</span>

        </p>

          <!--写出html代码-->

    </body>

</html>


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

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

1回答
好帮手慕星星 2018-05-14 10:16:03

经测试,垂直居中没有失效,你还缺少一个字体大小,参考:

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

自己再测试下,祝学习愉快~~

  • 提问者 李二狗狗狗 #1
    可是如果我把高度改一下,比如改成290px,又不会垂直居中了,这时候还需要重新更改字体大小吗?这个字体大小的值是怎么计算出来的呢?(vertical-middle的定义不是垂直居中吗?为什么改动了高度就会变动呢)
    2018-05-14 11:20:42
  • bbbboom 回复 提问者 李二狗狗狗 #2
    你的高度与行高中设置一个就可以了,你可以用字体默认的大小16*2*5试一下。
    2018-05-14 15:58:10
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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