分享 | 再说图文对齐问题的解决方法

胖者是谁

已于 2022-08-04 10:09:53 修改

阅读量260

点赞数 3

分类专栏： css 文章标签： html 前端 css

于 2022-08-03 19:22:07 首次发布

本文链接：https://blog.csdn.net/m0_72383454/article/details/126144052

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、遇到的图文问题

二、vertical-align详细属性说明

三、解决办法

四、行内块错位的问题

一、遇到的图文问题

今天刚说，遇到图文对齐就是我的老大难，然后今天就……又卡住了！

这是效果图，结构如下：

       <div class="input">
            <img src="./img/搜索小@2x.png">
            <div class="discover">
                <span>资料</span>
                <span>发现</span>
                <span>板块</span>
            </div>
            <button>
                <img src="./img/组 1113@2x.png">
                <span>发布</span>
            </button>
        </div>

怎么说呢，我想要的是discover盒子和img图片是对齐的，明明用了vertical-align 这个属性来调整图文垂直位置，可是没有用！！！

二、vertical-align详细属性说明

我们先来简单说一下vertical-align 这个属性吧.

参数：

baseline：与元素的基线对齐。
middle：与元素中部对齐
sub：字下沉
super：字上升
text-top：文本顶部对齐
text-bottom：文本底部对齐
top：和本行位置最高元素对齐
bottom：和本行位置最低元素对齐

暂时不用我遇到的问题，我们来举一个例子来说明。

    <div class="box">
        <img src="./分享圈（移动端）/img/组件 4 – 1@2x.png" >
        <div class="box1">
            <span>1</span>
            <span>1</span>
            <span>1</span>
            <span>1</span>
        </div>
    </div>

     <style>
        .box{
            width: 200px;
            height: 50px;
            border: 6px solid blue;
            display: flex;
        }
        .box1{
            width: 150px;
            height: 30px;
        }
        img {
            vertical-align: middle;
            width: 30px;
            height: 30px;
        }

        span {
            display: inline-block;
            width: 30px;
            height: 20px;
            text-align: center;
            background-color: orange;
        }
    </style>

可以看到，我们明明给img图片设置了vertical-align：middle,可是还是没有用。这是为什么呢？事实上，一个盒子中可能由多行多个元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个盒子而言的。如果把 vertical-align:middle 放到一个单元格元素，即table的td元素中，它的垂直居中显示是没任何问题的，因为它表示相对于该行的垂直高度居中显示。而在我设定的<div>块中并不只存在一行，因此它无法识别默认显示在顶部。