关于三个vertical-align:middle;属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本样式</title>
        <style type="text/css">
           /*写出CSS样式*/
           p{
            background:#eee;
            text-align: center;
            font-size:2em;
            height:150px;
            line-height:5em;
           }
           img{
            vertical-align:middle;
           }
           .span1{
            font-size:2em; 
            vertical-align:middle;
           }
           .span2{
            vertical-align:middle;
            color: red;
            text-decoration: underline;
            text-transform: capitalize;
           }
        </style>
    </head>
    <body>
          <!--写出html代码-->
          <P>
              <img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"><span class="span1">CSS层叠样式表</span><span class="span2">(cascading styli sheets)</span>
          </P>
    </body>
</html>

必须给图片和两个文字段间都添加这个属性vertical-align:middle; 才能实现题目中的垂直对齐方式吗？

慕村7304535 2019-01-14

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