关于vertical-align属性我有一个问题为什么不能直接在p标签里添加该属性使这段内容居中呢

关于vertical-align属性我有一个问题为什么不能直接在p标签里添加该属性使这段内容居中呢

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文本样式</title>

        <style type="text/css">

        p{background:#eee;text-align:center;line-height:5em;font-size:2em;font-family:宋体;}

        img{vertical-align:middle;}

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

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

        

           /*写出CSS样式*/

        </style>

    </head>

    <body>

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

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

       <span class="tow">(Cascading style sheets)</span>

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

    </body>

</html>


正在回答

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

1回答

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了

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

祝学习愉快!

  • qq_命运_szFJMV 提问者 #1
    额,假如A和B外面添加了p标签在p标签中加vertical-align标签的话A和B是否会同时垂直居中呢?
    2018-11-06 22:22:38
  • 妮可妮可妮_ 回复 提问者 qq_命运_szFJMV #2
    你好同学,是不可以的,vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,祝学习愉快!
    2018-11-07 11:01:31
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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