单词和图片相对于“CSS层叠样式表”居中显示,是这样做吗，分别给单词和图片设置居中属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本样式</title>
        <style type="text/css">
           /*写出CSS样式*/
           p{
               background-color:#eee;
               font-size:2em;
               line-height:5em;
               font-family:"宋体";
             
           }
           .num1{
               font-size:2em;
               
           }
           .num2{
               color:red;
               text-decoration:underline;
               vertical-align:middle;
           }
           img{
               vertical-align:middle;
           }
        </style>
    </head>
    <body>
          <!--写出html代码-->
          <p>
              <img src=" http://img1.sycdn.imooc.com\/climg/59c21bae000157fa01000059.jpg" alt="图片加载失败"/>
              <span class="num1">CSS层叠样式表</span>
             <span class="num2">(Cascading Style Sheets)</span>
          </p>
    </body>
</html>

慕勒2497449 2020-02-18

源自：CSS文本样式 4-3 编程练习

收起

2回答

好帮手慕言 2020-02-19 10:20:46

同学你好，默认情况下图片的底线和会文字的基线对齐显示，底线可以理解为四线三格中的第四条线，基线可以理解为四线三格中的第三条线。如果只设置图片或者文字垂直居中显示，是不能达到效果。所以文字和图片都需要设置vertical-align属性值为middle。因为是p里面的子级设置的vertical-align: middle;因此是p里面的子级居中。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答