在網頁設計中，經常會遇到需要在圖片旁邊添加文字的情況。而如何讓這些文字居中對齊，成為了我們的問題。下面就來介紹一下如何用CSS實現圖片旁邊的字居中。

<div class="img-wrap">
<img src="image.jpg" alt="示例圖片">
<p class="caption">這是示例圖片的說明文字</p>
</div>

首先，我們需要將圖片和文字都包裹在一個div標簽里面，然后給該div一個class類名方便樣式控制。接下來，我們用CSS來控制其中的圖片和文字。

.img-wrap {
position: relative;
}
.caption {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
color: #fff;
padding: 10px;
margin: 0;
text-align: center;
width: 100%;
}

上面的代碼中，我們首先將div的position屬性改為relative，以讓其內部的元素相對于該div定位。然后，我們給文字的class命名為caption，將其position屬性改為absolute，相對于div定位，并將bottom屬性改為0，讓其沿著div底邊對齊。同時，我們還將背景顏色改為半透明的黑色，文字顏色為白色，并設置了padding和margin為10px，以讓文字與邊框之間保持間隔。最后，我們將文字的寬度改為100%，以讓其撐滿整個div。

這樣，在我們的代碼設置完成后，圖片旁邊的文字就能夠完美居中顯示了。