在CSS中，我們可以使用多種方法將文本與圖片進行對齊，以下是一些常見的對齊方法：
1、文本與圖片垂直對齊：
- 使用vertical-align 屬性。vertical-align: middle; 會使文本與圖片在垂直方向上居中對齊。
- 使用 Flexbox 布局，通過設(shè)定align-items: center;，可以使文本與圖片在容器內(nèi)垂直居中對齊。
2、文本與圖片水平對齊：
- 使用text-align 屬性。text-align: center; 會使文本與圖片在水平方向上居中對齊。
- 使用 Flexbox 布局，通過設(shè)定justify-content: center;，可以使文本與圖片在容器內(nèi)水平居中對齊。
3、混合對齊：
- 結(jié)合使用上述方法，可以實現(xiàn)文本與圖片的混合對齊，可以使用vertical-align: middle; 和text-align: right; 來實現(xiàn)文本與圖片在垂直方向上居中對齊，并在水平方向上靠右對齊。
示例代碼
下面是一個示例代碼，展示了如何使用CSS將文本與圖片進行垂直和水平對齊：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: right; /* 水平靠右 */
}
img {
vertical-align: middle; /* 圖片與文本垂直居中 */
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="圖片">
<p>這是一段文本，它將對齊到圖片的右側(cè)并垂直居中。</p>
</div>
</body>
</html>在這個示例中：
.container 使用了 Flexbox 布局，通過align-items: center; 實現(xiàn)垂直居中，通過justify-content: right; 實現(xiàn)水平靠右。
img 元素使用了vertical-align: middle; 來確保圖片與文本在垂直方向上居中對齊。
圖片示例
通過使用CSS的Flexbox布局和vertical-align屬性，我們可以輕松地實現(xiàn)對文本與圖片的對齊控制，這種方法既適用于簡單的對齊需求，也適用于更復雜的布局場景，希望這篇文章能幫助你更好地理解和應用CSS對齊技術(shù)。
