對齊是網頁設計中一個不可忽視的細節，而圖文對齊更是需要我們多加注意。在 CSS 中，有多種方式可以完成圖文對齊的效果。 1. 使用 float 屬性 float 是 CSS 中用于設置浮動元素的屬性。我們可以將圖片設置為浮動元素，同時設置其位置。例如，以下代碼將圖片設置為右側浮動：

img{
float:right;
margin-left: 10px;
}

其中，margin-left 是為了讓文本與圖片形成一定的間隔。使用此方法需要注意的是，浮動元素對于文本的位置可能會產生間隙。 2. 使用 display: flex flex 是 CSS 中用于實現彈性布局的屬性。在 flex 布局中，我們可以通過設置一定的參數實現圖文對齊的效果。例如，以下代碼將圖片設置為固定寬度（100px）后，通過 flex 屬性實現居中對齊：

.wrapper{
display:flex;
align-items:center;
}
img{
width: 100px;
margin-right: 10px;
}

其中，align-items 用于設定 flex 容器中的行的垂直對齊方式。使用此方法可以很好地解決浮動元素造成的間隙問題。 3. 使用 position 屬性 在 CSS 中，position 屬性用于設置元素的定位方式，以及與其他元素的位置關系。當我們需要實現較為特殊的對齊效果時，可以使用 position 屬性。例如，以下代碼將圖片設置為絕對定位，與文本左對齊：

img{
position:absolute;
left: 0;
}

使用此方法需要注意，需要對文本元素設置一定的邊距，避免與圖片重疊。 總的來說，CSS 提供了多種方法可以實現圖文對齊。在實際應用中，我們需要根據不同情況，靈活選擇合適的方法實現對齊效果，從而保證網頁設計的整體美觀度。