vertical-align在flex布局下失效的问题

最新推荐文章于 2024-06-02 17:14:20 发布

Artsman

最新推荐文章于 2024-06-02 17:14:20 发布

阅读量937

点赞数

分类专栏：前端开发技术

本文链接：https://blog.csdn.net/Liu_JiaqiPro/article/details/121012942

版权

css css3 html5

前端开发技术专栏收录该内容

30 篇文章 0 订阅

订阅专栏

想要一个图片和文字横向排列时首先想到用flex布局，但是文字老是在图片的顶端对齐显示，非常的不人性，这时使用vertical-align:middle结果不生效。这时候在文字标签里面加上这两个style属性。

display:flex;

align-items:center;

<span
      style="

            display: flex;
            align-items: center;
            
            margin-left: 10px;
            width: 140px;
            word-wrap: break-word;
            word-break: break-all;
            "
        >
        {{ item.name }}
</span>

再试试看，发现可以了。