HTML 文字与图片元素垂直对齐方式

一. 问题描述

        同一个父标签内span标签的文字与图片（img标签）不对齐。

       CSS代码：

       .father{
            background-color: orange;
            height: 60px;
        }
        span{
            display: inline-block;
            height: 20px;
            background-color: green;
        }
        img{
            width: 60px;
            height: 40px;
        }

        HTML代码：

 <div class="father">
        <span >文本</span>
        <img src="./img/bg01.jpg" />
 </div>

        运行结果：

二. 解决方法（使用vertical-align属性）

        （1）想要效果：文本元素和图片元素顶部对齐。

                 方法：在span标签上设置属性   vertical-align: top;

                 效果：

                (也可以给span和img标签设置float属性达到效果)

          （2）想要效果：文本元素和图片元素中间对齐。

                   方法：在img标签上设置属性    vertical-align: middle;

                    效果：

          （3）想要效果：文本元素和图片元素底部对齐。

                   方法：在img标签上设置属性    vertical-align: bottom;

                   效果: