CSS樣式表中有很多屬性可以用于調整文本和圖片在網頁中的對齊方式。本文將重點介紹在CSS中如何實現圖片和文字的對齊。

文本對齊方式

CSS中，text-align屬性用于控制文本在容器內的對齊方式。常用的值有left、right、center、justify等。

.container {
text-align: center; /* 文本居中對齊 */
}

圖片對齊方式

CSS中，vertical-align屬性用于控制圖片在容器內的對齊方式。常用的值有top、middle、bottom等。

.container img {
vertical-align: middle; /* 圖片垂直居中對齊 */
}

圖片文字對齊方式

在網頁中，圖片和文字的對齊方式也非常重要，特別是在制作頁面布局時。CSS中，我們可以使用以下幾種方法來控制圖片和文字的對齊方式。

方法一：使用display:flex

在父容器中使用display:flex屬性可以方便地控制圖片和文字的對齊方式，并且可以自適應布局。下面的代碼實現了圖片居左對齊，文字垂直居中對齊。

.container {
display: flex;
align-items: center; /* 文字垂直居中對齊 */
}
.container img {
margin-right: 10px; /* 圖片右邊距調整 */
}

方法二：使用float屬性

使用float屬性可以使圖片和文字靠左或靠右對齊，但是需要注意，如果圖片高度超出了行高，可能會產生布局問題。

.container img {
float: left; /* 圖片左對齊 */
margin-right: 10px; /* 圖片右邊距調整 */
}
.container p {
line-height: 50px; /* 行高調整 */
}

方法三：使用position屬性

使用position屬性和top、bottom、left、right屬性可以實現圖片和文字的精確對齊，但是需要注意，當圖片或文字尺寸變化時，需要重新調整位置。

.container img {
position: absolute;
left: 10px; /* 圖片左側距離 */
top: 50%; /* 圖片上下居中 */
transform: translateY(-50%);
}
.container p {
margin-left: 100px; /* 文字左邊距 */
}

以上三種方法都可以實現圖片和文字的對齊，具體根據實際需求選擇不同的方法。