css样式问题

Question

无法对齐，请问是什么原因，怎么解决

<div>
   <img style="width:12px;vertical-align:middle" src="./img.png" />
   9
</div>

小图明显不对齐

Answer 1

<div>

<img style="vertical-align: middle;" src="./img/register-success.png" />         
<span>9</span>

</div>

给img设置就可以了,没那么麻烦.

Answer 2

可以给具体的某些元素设置不同的px值
<img style="vertical-align: middle;">
<img style="vertical-align: -2px;">
<span style="vertical-align: 5px;">9</span>
我只是举个例子 自己调一下试试看

Answer 3

可以用flex 布局哈哈哈哈，

div{
    display: flex;
    align-items: center;
}

Answer 4

1.不加vertical-align 测试结果没有任何问题。代码如下

<div>
    <img style="width: 12px;" src="images/img.jpg" />
     9
</div>

2.可以用绝对定位：

   <style>

        div{
            position: relative;/*定位父级*/
            width: 50px;
            height: 24px;/*设置高度*/
            line-height: 24px;/*与高度一致*/
            padding-left: 20px;
            background-color:#3d92e3;
        }
        img{
            position: absolute;/*绝对定位*/
            width: 12px;
            height: 12px;
            left: 0;
            top:50%;/*定位父级的一半*/
            transform: translateY(-50%);/*向上偏移自身高度的一半*/
        }
    </style>

3.另一种方式flex布局
实际开发中加上兼容性前缀

<div>
   <img style="width:12px" src="./img.png" />
   <span>9</span>
</div>
div{
    display: flex;
    align-items: center;
}

Answer 5

这是因为你的 9 还在 base-line 上，包个 span 让它 vertical-align middle

Answer 6

悄悄进来看看flex布局咋整

Answer 7

给div加个、 height: 24px;/设置高度/

        line-height: 24px;/*与高度一致*/

img{vertical-align: middle};可以，试一下