HTML 多张图片同行显示:代码示例及样式控制
可以使用以下代码实现多张图片同行显示:
<div>
<img src='image1.jpg' alt='Image 1'>
<img src='image2.jpg' alt='Image 2'>
<img src='image3.jpg' alt='Image 3'>
</div>
在这个例子中,三张图片被包裹在一个 'div' 元素中,这个 'div' 元素可以用于控制图片的位置和样式。如果希望图片水平居中,则可以添加以下样式:
div {
display: flex;
justify-content: center;
}
这将把 'div' 元素变为一个 Flexbox 容器,并将图片水平居中。如果需要垂直居中,则可以添加以下样式:
div {
display: flex;
justify-content: center;
align-items: center;
}
这将使图片在垂直和水平方向上都居中。
原文地址: https://www.cveoy.top/t/topic/oqK0 著作权归作者所有。请勿转载和采集!