如何用HTML和CSS在标题文本下方同一行居中三张图片

先纠正一个关键错误 #

你提到的test-align是拼写错误，正确的CSS属性是text-align，这很可能是你之前尝试失效的核心原因之一。

两种可靠的居中方案 #

方案1：容器配合text-align（兼容旧浏览器）

用容器div包裹图片，利用text-align:center让行内元素的图片自动水平居中：

<h1>你的标题</h1>
<div class="img-wrapper">
  <img src="pic1.png" alt="图片1">
  <img src="pic2.png" alt="图片2">
  <img src="pic3.png" alt="图片3">
</div>

.img-wrapper {
  text-align: center;
  width: 100%; /* 确保容器占满父元素宽度，否则居中范围会受限 */
}
.img-wrapper img {
  margin: 0 8px; /* 可选：给图片添加间距，避免拥挤 */
}

方案2：Flex布局（现代推荐）

Flex布局更灵活，无需依赖行内元素特性，直接通过属性控制居中：

<h1>你的标题</h1>
<div class="img-wrapper">
  <img src="pic1.png" alt="图片1">
  <img src="pic2.png" alt="图片2">
  <img src="pic3.png" alt="图片3">
</div>

.img-wrapper {
  display: flex;
  justify-content: center; /* 实现水平居中 */
  gap: 8px; /* 图片间的间距，比margin更直观易维护 */
  width: 100%;
}

你之前方法失效的可能原因 #

1. 属性拼写错误：test-align不是有效的CSS属性，必须写成text-align
2. 容器宽度不足：如果包裹图片的div没有设置足够宽度，text-align:center只会在容器自身宽度范围内生效
3. 硬编码像素位置：这种方式容易受父元素布局影响，且不具备响应性，不适合用于通用居中需求

内容的提问来源于stack exchange，提问作者johnnyC