CSS讓圖片上文字居中

在CSS中，我們可以使用多種方法讓圖片上的文字居中，以下是一種簡單的方法，使用flexbox布局來實現(xiàn)。

我們需要創(chuàng)建一個包含圖片和文字的容器，這個容器可以是一個div元素，或者其他任何可以包含內(nèi)容的元素。

HTML代碼：

<div class="image-container">
    <img src="image.jpg" alt="圖片">
    <p class="image-text">圖片上的文字</p>
</div>

在CSS中，我們可以使用flexbox布局來讓文字居中，我們可以將容器設(shè)置為一個flex容器，然后使用justify-content和align-items屬性來分別控制水平和垂直方向上的對齊。

CSS代碼：

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

這樣，圖片上的文字就會居中了，如果需要調(diào)整文字的大小、顏色等樣式，可以在p元素上添加相應的CSS樣式。

需要注意的是，這種方法只適用于現(xiàn)代瀏覽器，因為flexbox布局是CSS3中的新特性，如果需要在不支持flexbox的瀏覽器上實現(xiàn)文字居中，可能需要使用其他方法，如使用position屬性來定位文字。