div 图片两边靠边 中间有边距
时间: 2023-12-05 07:58:42 浏览: 68
css 两边固定中间自适应布局的实现
你可以使用CSS中的Flexbox布局来实现这个效果。首先,将包含图片的div元素设置为Flex容器,然后使用justify-content和align-items属性将其内容水平和垂直居中。最后,使用padding属性来添加中间的边距。
下面是一个示例代码:
HTML代码:
```html
<div class="image-container">
<img src="your-image.jpg" alt="Your Image">
</div>
```
CSS代码:
```css
.image-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.image-container img {
max-width: 100%;
}
```
这将在div容器中将图像靠边放置,同时添加20像素的内边距。你可以根据需要调整内边距和其他样式。
阅读全文