Posted on | by liu
在网页设计中，经常需要同时显示多张图片。而若要达到更好的视觉效果，这些图片的对齐非常重要。本文将介绍如何使用 CSS 实现多张图片对齐。
首先，需要准备多张图片，并使用 HTML 的 img 标签插入到页面中。例如，下面的代码插入了三张图片：
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
若要让这三张图片水平居中且间距相等，可以使用下面的 CSS 代码：
<style>
img {
display: inline-block;
vertical-align: middle;
margin: 0 auto;
width: 33%;
}
</style>在这个 CSS 代码中，使用了四个属性，分别是 display、vertical-align、margin 和 width。其中，display 用于让图片变成行内块元素，而 vertical-align 用于让它们在垂直方向上居中对齐。
接着，使用 margin 属性将左右两侧的留白设为自动，这样可以使图片在水平方向上居中对齐。最后，使用 width 属性将每张图片的宽度设为 33%，以保证它们在水平方向上等分页面。
若想要让这三张图片竖直居中，需要将它们放在一个父元素中，并为该元素设置 display:flex 和 align-items:center。CSS 代码如下：
<style>
.img-container {
display: flex;
align-items: center;
justify-content: center;
}
.img-container img {
width: 33%;
}
</style>
<div class="img-container">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>这个代码中，首先创建了一个名为 img-container 的 div 元素，并为它设置了 display:flex 和 align-items:center，从而使其中的元素垂直居中对齐。同时，还需要添加 justify-content:center 属性将其中的子元素居中对齐。
最后，使用 CSS 代码设置 img 元素的宽度为 33%，从而实现了多张图片的水平排列。
总结来说，使用 CSS 实现多张图片对齐，可以使用 display、vertical-align、margin 和 width 属性让图片在页面中水平或垂直居中对齐。而将这些图片放置于一个父元素中，使用 display:flex、align-items 和 justify-content 属性，则可以进一步实现九宫格、矩阵等不同排列方式。