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

新闻中心 NEWS CENTER

2025-11-30

浏览次数：次

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

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

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

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

<div class="flex-item">
  @@##@@
  <div class="text-content">
    <h4>标题文本</h4>
    <p>这里是描述性文字内容，长度可能不同，但希望与图片对齐良好。</p>
  </div>
</div>

CSS 设置容器为 flex：

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

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

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

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

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

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

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

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

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

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