當我們在構建網頁布局時，往往需要將圖片和文字水平對齊。一種常見的做法是使用CSS來實現水平對齊效果。

首先，我們需要在HTML中定義圖片和文字容器。例如：

<div class="image">
<img src="example.png">
</div>
<div class="text">
<p>這是一段文本。</p>
</div>

接下來，我們需要使用CSS來控制圖片容器和文字容器的位置。可以使用以下樣式代碼：

.image {
display: inline-block;
vertical-align: middle;
}
.text {
display: inline-block;
vertical-align: middle;
}

在上述代碼中，display: inline-block;屬性可以讓圖片和文字容器在同一行顯示。而vertical-align: middle;屬性可以讓它們垂直居中對齊。

除此之外，還有其他一些方法可以實現圖片和文字的水平對齊效果，比如將它們都放在同一個div容器內再使用display: flex;屬性來對齊。但是上述方法是最為常見和簡單的方法。