在CSS中，我們可以使用多種方法將圖片和文本進(jìn)行對(duì)齊，以下是一些常見(jiàn)的對(duì)齊方法：
1、垂直對(duì)齊：
- 使用vertical-align 屬性，可以設(shè)置文本與圖片在垂直方向上的對(duì)齊方式。vertical-align: middle; 會(huì)使文本與圖片的中部對(duì)齊。
- 示例代碼：
```html
<img src="image.jpg" style="vertical-align: middle;">
<span style="vertical-align: middle;">文本</span>
```
2、水平對(duì)齊：
- 使用text-align 屬性，可以設(shè)置文本在水平方向上的對(duì)齊方式。text-align: center; 會(huì)使文本居中。
- 示例代碼：
```html
<div style="text-align: center;">
<img src="image.jpg">
文本
</div>
```
3、圖片和文本同時(shí)對(duì)齊：
- 可以通過(guò)設(shè)置圖片的margin 屬性來(lái)調(diào)整圖片與文本之間的水平距離，從而實(shí)現(xiàn)同時(shí)對(duì)齊。
- 示例代碼：
```html
<img src="image.jpg" style="margin-right: 10px;">
<span>文本</span>
```
4、使用 Flexbox 布局：
- Flexbox 是一種現(xiàn)代的布局方式，可以輕松地實(shí)現(xiàn)對(duì)齊。
- 示例代碼：
```html
<div style="display: flex; align-items: center; justify-content: center;">
<img src="image.jpg">
文本
</div>
```
5、使用 Grid 布局：
- Grid 布局也適用于圖片和文本的對(duì)齊。
- 示例代碼：
```html
<div style="display: grid; align-items: center; justify-content: center;">
<img src="image.jpg">
文本
</div>
```
