css两边文字中间图片
时间: 2023-07-25 07:43:58 浏览: 143
Android textview 文字中间加上图片
5星 · 资源好评率100%
可以使用CSS的flexbox布局实现两边文字中间图片的效果,具体方法如下:
HTML代码:
```html
<div class="container">
<div class="left">左边的文字</div>
<div class="middle"><img src="图片地址" alt="图片"></div>
<div class="right">右边的文字</div>
</div>
```
CSS代码:
```css
.container {
display: flex;
align-items: center; /* 垂直居中 */
}
.middle {
margin: 0 10px; /* 图片两侧的间距 */
}
.left,
.right {
flex: 1; /* 平分剩余空间 */
}
```
以上代码会将左侧文字、右侧文字和图片平分容器的宽度,并且让它们垂直居中显示,图片两侧有10px的间距。你可以根据需要调整间距和对齐方式。
阅读全文