怎么让图片和文字从底部对齐变成水平对齐
时间: 2024-03-28 12:41:28 浏览: 101
如果要让图片和文字从底部对齐变成水平对齐,可以使用以下方法:
1. 使用 CSS `vertical-align` 属性:
将图片和文字的 `vertical-align` 属性设置成 `middle` 可以让它们在同一行水平居中对齐。同时,使用 `display: inline-block;` 属性可以让它们在同一行显示。
```html
<div>
<img src="image.jpg" style="vertical-align:middle; display:inline-block;">
<p style="vertical-align:middle; display:inline-block;">这里是文字</p>
</div>
```
2. 使用 Flexbox 居中元素:
使用 Flexbox 布局可以让元素居中,设置 `display: flex; align-items: center;` 属性可以让元素在父元素中垂直居中对齐,而 `display: inline-block;` 属性可以让它们在同一行显示。
```html
<div style="display:flex; align-items:center;">
<img src="image.jpg" style="display:inline-block;">
<p style="display:inline-block;">这里是文字</p>
</div>
```
以上两种方法都可以使图片和文字在同一行水平居中对齐。
阅读全文