css 图片居中对齐多行文字中的第一行

最新推荐文章于 2024-01-14 22:18:12 发布

左钦杨

最新推荐文章于 2024-01-14 22:18:12 发布

阅读量771

点赞数

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

本文链接：https://blog.csdn.net/sinat_29843547/article/details/127803343

版权

web前端专栏收录该内容

101 篇文章 1 订阅

订阅专栏

本文介绍了如何利用CSS的Flex布局来实现首行图片与多行文字的垂直对齐。通过设置`display: inline-flex`和`align-items: center`，可以将图片与文字在一行内对齐，并保持图片高度与文字行高一致。示例代码展示了具体的样式设置，最终效果清晰直观。

摘要由CSDN通过智能技术生成

文字text-indent(首行缩进让位) 图片绝对定位。（略）
flex

    <div class="container">
      <span class="tips-img"><img src="https://bossfile.jiandanxinli.com/20220803/1350cc8d209c40be84e38b392cdf3345.png"></span>
      <span class="text">多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字</span>
    </div>

<style>
.container {
  margin: 20px;
  background: #FFF;
  border-radius: 4px;
}
.tips-img {
  vertical-align: top; /* 文字基线上对齐 */
  display: inline-flex;
  align-items: center;
  height: 16px; /* 和文字 行高一致*/
}
.tips-img img {
  height: 14px;
}
.text {
  line-height: 16px;
  font-size: 14px;
}
</style>