怎么让img在div居中
时间: 2024-05-10 16:15:25 浏览: 94
JS+CSS 控制Img在div中居中显示一部分
3星 · 编辑精心推荐
你可以使用CSS中的flexbox来实现图片在div中居中显示。具体步骤如下:
1. 设置父元素div的display属性为flex,这样子元素就可以使用flexbox布局了。
2. 设置父元素div的justify-content和align-items属性为center,这样子元素就可以在水平和垂直方向上都居中了。
下面是示例代码:
HTML代码:
```html
<div class="container">
<img src="your-image.jpg" alt="your-image">
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container img {
max-width: 100%;
height: auto;
}
```
这样就可以让图片在div中居中了。你可以根据自己的需求调整容器和图片的大小。
阅读全文