CSS中文字和圖片的對齊方式
在CSS中，我們可以使用多種方式來對齊文字和圖片，以下是一些常見的方法：
1、垂直對齊：
- 使用vertical-align屬性來設(shè)置圖片與文字的垂直對齊方式。vertical-align: middle;將使圖片與文字在垂直方向上居中對齊。
- 示例代碼：
```html
<div style="vertical-align: middle;">
<img src="image.png" style="vertical-align: middle;">
<span style="vertical-align: middle;">文字</span>
</div>
```
2、水平對齊：
- 使用text-align屬性來設(shè)置圖片與文字在水平方向上的對齊方式。text-align: right;將使圖片與文字在水平方向上右對齊。
- 示例代碼：
```html
<div style="text-align: right;">
<img src="image.png" style="text-align: right;">
<span style="text-align: right;">文字</span>
</div>
```
3、使用Flexbox：
- Flexbox是一個強(qiáng)大的布局工具，可以用來輕松地對齊圖片和文字，通過設(shè)定align-items和justify-content屬性，可以實現(xiàn)對齊方式的***控制。
- 示例代碼：
```html
<div style="display: flex; align-items: center; justify-content: right;">
<img src="image.png">
<span>文字</span>
</div>
```
4、使用Grid布局：
- Grid布局也支持圖片和文字的對齊，通過設(shè)定align-items和justify-content屬性，可以實現(xiàn)對齊方式的***控制。
- 示例代碼：
```html
<div style="display: grid; align-items: center; justify-content: right;">
<img src="image.png">
<span>文字</span>
</div>
```
