本文将介绍如何使用 HTML 和 CSS 实现多张图片并排显示，并在每张图片下方添加对应的文字说明。核心在于利用 inline-block 属性控制图片和文字说明的显示方式，以及 text-align: center 实现文字居中对齐。通过本文，你将掌握一种简单有效的图片布局方法，适用于各种需要图文并茂展示的场景。
在网页设计中，经常需要将多张图片并排显示，并在每张图片下方添加简短的文字说明。传统的 HTML 布局方式，例如使用 <img> 标签直接排列，或者使用 <figure> 和 <figcaption> 标签，可能无法满足并排显示的需求。本文将介绍一种简单而有效的方法，利用 inline-block 属性和 text-align 属性，实现多图并排显示并添加图说的功能。
实现原理
核心思路是将每张图片和对应的文字说明包裹在一个 div 容器中，然后将该 div 容器设置为 display: inline-block。inline-block 属性允许元素像行内元素一样排列，但同时又可以设置宽度和高度，从而实现并排显示的效果。为了使文字说明居中显示，可以将 div 容器的 text-align 属性设置为 center。
立即学习“前端免费学习笔记（深入）”；
HTML 结构
首先，定义 HTML 结构，使用 div 元素作为容器，包含 <img> 标签和 <figcaption> 标签。
<div class="image-wrapper">
<img src="img1.png" alt="Image 1">
<figcaption>Caption 1</figcaption>
</div>
<div class="image-wrapper">
<img src="img2.png" alt="Image 2">
<figcaption>Caption 2</figcaption>
</div>
<div class="image-wrapper">
<img src="img3.png" alt="Image 3">
<figcaption>Caption 3</figcaption>
</div>在上述代码中，image-wrapper 类用于定义容器的样式，img 标签用于显示图片，figcaption 标签用于显示文字说明。 alt 属性为图片添加替代文本，增强可访问性。
CSS 样式
接下来，定义 CSS 样式，设置 image-wrapper 类的属性。
<style>
.image-wrapper {
display: inline-block;
text-align: center;
margin: 10px; /* 可选：添加外边距，使图片之间有间隔 */
}
.image-wrapper img {
max-width: 200px; /* 可选：限制图片的最大宽度 */
height: auto;
}
.image-wrapper figcaption {
font-size: 14px; /* 可选：调整文字大小 */
color: #666; /* 可选：调整文字颜色 */
}
</style>在上述代码中，display: inline-block 属性使 div 容器可以并排显示，text-align: center 属性使文字说明居中显示。 可以根据需要调整 margin 属性来设置图片之间的间隔。 max-width 和 height: auto 可以用来控制图片的尺寸，保持图片比例。
完整示例
将 HTML 结构和 CSS 样式结合起来，即可实现多图并排显示并添加图说的功能。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Images with Text</title>
<style>
.image-wrapper {
display: inline-block;
text-align: center;
margin: 10px;
}
.image-wrapper img {
max-width: 200px;
height: auto;
}
.image-wrapper figcaption {
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="image-wrapper">
<img src="img1.png" alt="Image 1">
<figcaption>Caption 1</figcaption>
</div>
<div class="image-wrapper">
<img src="img2.png" alt="Image 2">
<figcaption>Caption 2</figcaption>
</div>
<div class="image-wrapper">
<img src="img3.png" alt="Image 3">
<figcaption>Caption 3</figcaption>
</div>
</body>
</html>注意事项
- 确保图片路径正确，并且图片文件存在。
- 可以根据需要调整 CSS 样式，例如修改图片大小、文字颜色、间距等。
- 如果图片数量过多，可能会导致页面显示拥挤，可以考虑使用 CSS Media Queries 来实现响应式布局，在不同屏幕尺寸下调整图片显示方式。
- 使用 alt 属性为图片添加替代文本，有助于提高网页的可访问性。
总结
通过使用 inline-block 属性和 text-align 属性，可以轻松实现多图并排显示并添加图说的功能。这种方法简单易懂，适用于各种需要图文并茂展示的场景。希望本文能帮助你更好地进行网页设计。
