CSS如何让图片和文字都居中显示？

在网页设计中，将图片与文字进行合理排版是提升用户体验的重要环节，图片居中显示文字”是一种常见需求，通常指图片在容器中居中，同时文字围绕图片或与图片协同居中布局，实现这一效果需要综合运用CSS的多种布局技术，包括Flexbox、Grid、传统定位及文本对齐属性等，以下从不同场景出发,详细解析实现方法及注意事项。

图片与文字同行的水平居中（图文混排）

当图片和文字需要在一行内显示，且图片水平居中时,可通过以下方式实现：

使用Flexbox布局（推荐）

Flexbox是实现现代布局的首选，其灵活性可轻松处理图文混排的居中问题，核心思路是将容器设置为display: flex，并通过justify-content: center实现图片水平居中，文字则通过align-self属性控制垂直对齐。

<div class="container">
  <img src="example.jpg" alt="示例图片">
  <span>这是一段围绕图片的文字内容，通过Flexbox实现图片居中。</span>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中图片 */
  align-items: center;     /* 可选：垂直居中图片和文字 */
  gap: 10px;               /* 图片与文字间距 */
}
.container img {
  max-width: 200px;        /* 限制图片最大宽度 */
  height: auto;
}
.container span {
  flex: 1;                 /* 文字占据剩余空间 */
  text-align: left;        /* 文字左对齐（可根据需求调整） */
}

关键点：

• justify-content: center确保图片在容器水平方向居中；
• align-items: center可使图片和文字垂直方向对齐（若仅需图片垂直居中，可移除该属性）；
• gap属性控制图文间距，替代传统的margin,代码更简洁。

使用Grid布局

Grid布局同样适合处理二维居中问题,尤其适合复杂布局场景。

.container {
  display: grid;
  grid-template-columns: auto 1fr; /* 图片列自适应，文字列占据剩余空间 */
  align-items: center;
  gap: 10px;
}
.container img {
  justify-self: center; /* 图片在网格列内水平居中 */
}

关键点：

• grid-template-columns定义两列布局，图片列宽度自适应，文字列占据剩余空间；
• justify-self: center将图片在其网格单元内水平居中。

传统浮动+文本对齐（兼容旧浏览器）

若需兼容IE等旧浏览器,可通过浮动和文本对齐实现：

<div class="container">
  <img src="example.jpg" alt="示例图片" class="center-img">
  <span>这是一段围绕图片的文字，通过浮动和文本对齐实现居中。</span>
</div>

.container {
  text-align: center; /* 容器内块级元素水平居中 */
}
.center-img {
  float: left;        /* 图片左浮动 */
  margin: 0 10px 0 0; /* 图片右侧间距 */
}
.container span {
  display: inline-block; /* 使文字与图片同行 */
  text-align: left;      /* 文字左对齐 */
}

关键点：

• 容器设置text-align: center，使浮动图片水平居中；
• 图片浮动后，需通过margin调整间距，文字设置为inline-block避免换行。

图片居中，文字环绕图片（文字环绕效果）

当需要文字围绕图片显示时,可通过浮动或Shape属性实现：

浮动实现文字环绕

.img-wrapper {
  float: left;
  width: 200px;
  margin: 0 15px 15px 0; /* 图片右侧和下方间距 */
}
.img-wrapper img {
  width: 100%;
  height: auto;
}
.text-content {
  overflow: hidden; /* 清除浮动 */
}

关键点：

• 图片容器浮动，文字自然环绕；
• 通过margin控制图片与文字的间距；
• 文字容器需overflow: hidden清除浮动,避免布局错乱。

CSS Shape实现不规则文字环绕（现代浏览器）

.img-wrapper {
  float: left;
  width: 200px;
  shape-outside: circle(50% at 50% 50%); /* 定义图片形状为圆形 */
  margin: 0 15px 15px 0;
}
.img-wrapper img {
  width: 100%;
  height: auto;
}
.text-content {
  overflow: hidden;
}

关键点：

• shape-outside定义文字环绕的形状（如圆形、多边形等）；
• 需配合float使用，且图片需设置为block元素。

图片与文字垂直居中（多行文字居中）

若需图片与多行文字在容器内同时垂直居中,Flexbox或Grid是最佳选择：

Flexbox垂直居中

.container {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center;     /* 水平居中 */
  height: 300px;          /* 容器高度 */
}
.container img {
  margin-bottom: 15px;
}
.container p {
  text-align: center;
}

Grid垂直居中

.container {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
  height: 300px;
}

响应式设计中的注意事项

1. 图片尺寸控制：使用max-width: 100%和height: auto确保图片在不同屏幕下自适应；
2. 媒体查询调整：在小屏幕下可通过媒体查询调整图文布局，例如将垂直排列改为水平排列；
3. Flex/Grid兼容性：Flexbox和Grid在现代浏览器中支持良好，但需注意IE11的部分兼容性问题（如Grid需加-ms-前缀）。

常见问题与解决方案

相关问答FAQs

问题1：为什么使用Flexbox布局图片居中时，文字会跑到图片下方？
解答：通常是因为容器未设置flex-direction: row（默认为column），导致元素垂直排列，需检查容器CSS，确保flex-direction: row，或通过flex-wrap: nowrap防止换行，若文字内容过长，需设置min-width: 0避免溢出。

问题2：如何实现图片居中且文字在图片下方也居中？
解答：可通过Flexbox的flex-direction: column和justify-content: center实现，将容器设置为display: flex; flex-direction: column; justify-content: center; align-items: center;，图片和文字会垂直居中排列，若需水平居中，文字可额外添加text-align: center。