H5W3
当前位置:H5W3 > 其他技术问题 > 正文

设置了align-items:center,但是无法垂直居中?

如题

具体HTML结构描述:

<div class='wrapper'>
<span>电话号码:</span>
<img scr='电话图标' />
<span class='font-blue'>86908690</span>
</div>

给wrapper设置了flex布局和align-items:center,照理说应该是居中对齐的,但是img始终偏下一点点,而两侧的文本对齐了。

之后换了种方式,不设置flex,直接给子元素设置vertical-align: center,那么所有子元素都正好垂直居中对齐了。

问题是解决了,但是我就是疑惑在为什么使用flex布局的时候不能垂直居中对齐,img会偏下呢

回答

<picture class="mr-2" style="
    display: flex;
    align-items: center;
">
    <span>123</span>                                        
    <img class="d-inline-block rounded-circle 
        aria-hidden="true" itemprop="image" "width="32" 
        style="display: inline;"
        src="https://avatar-static.segmentfault.com/653/292/653292003-5d6cd4f357bfc_big64">
    <span>123</span>
</picture>

我拿这个页面中你的头像改造的,效果没问题
开 F12 查一下是不是 img 元素有 margin, padding 或者 定位属性,
vertical-align, text-align 测了一下也没有问题额样子

本文地址:H5W3 » 设置了align-items:center,但是无法垂直居中?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址