div 图片水平居中横向排列代码
时间: 2023-09-02 18:02:50 浏览: 87
要将多个 div 中的图片水平居中横向排列,可以使用以下代码:
HTML 代码:
```
<div class="container">
<div class="image">
<img src="image1.jpg" alt="图片1">
</div>
<div class="image">
<img src="image2.jpg" alt="图片2">
</div>
<div class="image">
<img src="image3.jpg" alt="图片3">
</div>
</div>
```
CSS 代码:
```
.container {
display: flex;
justify-content: center;
}
.image {
margin: 10px;
}
.image img {
display: block;
max-width: 100%;
height: auto;
}
```
首先,使用一个父容器(.container)将所有的 div 包裹起来,并设置为 flex 布局,在水平方向上居中对齐(justify-content: center)。
然后,给每个图片的 div 设置一定的间距(margin: 10px),可以根据需要自行调整。
最后,对于图片本身(.image img),将其设置为 block 元素,使其具有宽度自适应的能力(max-width: 100%),高度根据比例自动调整(height: auto)。
这样,图片就会水平居中横向排列在容器中了。可以根据实际情况调整容器和图片的样式,如设置宽度、高度、边框等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)