如何在CSS中使用布局制作图文混排_Flexbox与align-items对齐图片文字

使用 Flexbox 可轻松实现图文混排，通过 display: flex 和 align-items 控制垂直对齐，如 center 居中、flex-start 顶部对齐，配合 gap 间距和一致图片尺寸，确保多行文本与图片对齐良好，避免传统浮动布局的复杂性。

在网页设计中，图文混排是常见布局需求，比如新闻列表、产品卡片或用户评论。使用 Flexbox 能快速实现灵活且响应式的图文排列，并通过 align-items 精确控制图片与文字的垂直对齐。

使用 Flexbox 创建基础图文结构

将图片和文字包裹在一个容器中，设置为 Flex 容器，即可轻松实现水平排列。

<div class="flex-item">
  <img src="example.jpg" alt="示例图片" width="80" height="80">
  <div class="text-content">
    <h4>标题文本</h4>
    <p>这里是描述性文字内容，长度可能不同，但希望与图片对齐良好。</p>
  </div>
</div>

CSS 设置容器为 flex：

.flex-item {
  display: flex;
  gap: 16px;
}

此时图片和文字并排显示，文字从左到右排列，Flexbox 默认主轴为水平方向。

立即学习“前端免费学习笔记（深入）”；

用 align-items 控制垂直对齐方式

align-items 决定子元素在交叉轴（默认为垂直轴）上的对齐方式。以下是常用值及其效果：

Logomaster.ai

Logo在线生成工具

99

查看详情

• align-items: center — 文字与图片垂直居中对齐，最常用
• align-items: flex-start — 对齐顶部，适合多行文本希望与图片顶端对齐
• align-items: flex-end — 对齐底部，较少用，可用于特殊设计
• align-items: baseline — 文字基线对齐图片底部，适合图标+短文本

例如让文字与图片垂直居中：

.flex-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

处理多行文本与图片不对齐问题

当文字内容较多时，即使设置了 align-items: center，也可能感觉对不齐。可通过以下方式优化：

• 限制图片尺寸一致，避免高度差异
• 给文字容器设置 line-height 统一行高
• 使用 align-self 单独调整某个子元素，如：align-self: flex-start;

如果只想标题与图片居中，描述文字另作处理，可嵌套更细结构。

基本上就这些。Flexbox 配合 align-items 让图文混排变得简单直观，无需浮动或定位，也能实现稳定对齐效果。关键是理解主轴与交叉轴的关系，选择合适的对齐方式适配内容结构。

以上就是如何在CSS中使用布局制作图文混排_Flexbox与align-items对齐图片文字的详细内容，更多请关注php中文网其它相关文章！