首页怎么把图片在一行对齐

怎么把图片在一行对齐

时间: 2024-09-12 20:13:56 浏览: 41

将图片在一排上水平对齐，你可以使用HTML和CSS来实现。这里是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; /* 使用 Flexbox 展示模式 */ justify-content: center; /* 图片在容器内居中对齐 */ } .images-container { row-gap: 5px; /* 设置行间距，让图片之间有一定间隔 */ } img { width: auto; height: auto; /* 自动保持宽高比，避免变形 */ } </style> </head> <body> <div class="container"> <div class="images-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3">  </div> </div> </body> </html> ``` 在这个例子中，`.container` 使用了 `display: flex;` 属性使其变为弹性盒子模型，`justify-content: center;` 对其中的 `.images-container` 内部元素（即图片）实现了水平居中。每个图片(`img`)设置了自适应宽度(`width: auto;`)和高度(`height: auto;`)，保持原始比例。

阅读全文