首页 > 文章 > 前端

CSS图文不对齐？flexbox轻松解决

时间：2026-01-10 21:09:40 385浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《CSS图文不对齐？flexbox轻松解决布局问题》，涉及到，有需要的可以收藏一下

图文默认不对齐是因 vertical-align: baseline 导致图片底部与文本基线对齐而下沉；Flexbox 通过 display: flex + align-items: center 可实现稳定垂直居中，配合 gap 和 flex-shrink: 0 提升响应性与兼容性。

css初级项目图片与文字不对齐怎么办_使用flexbox对齐图文内容

图片和文字在行内默认不对齐，是因为它们的 vertical-align 默认值是 baseline（基线对齐），而图片作为替换元素，其底部会与文本基线对齐，导致视觉上“下沉”。用 Flexbox 是更现代、可控的解法。

把包裹图片和文字的父元素（比如一个

或）设为 flex 容器：

Flex 容器中，align-items 控制所有子项在交叉轴（这里是垂直方向）上的对齐方式：

如果文字多行或图片尺寸大，可能需微调间距或拉伸行为：

HTML 结构：

这是说明文字

CSS：

.item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.item img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

这样图文始终垂直居中，响应友好，也不依赖字体度量。

本篇关于《CSS图文不对齐？flexbox轻松解决》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！