CSS讓img居中顯示文字的方法

在CSS中，我們可以使用flexbox布局來讓img元素中的文字居中顯示，下面是一個簡單的示例：

HTML代碼：

<div class="img-container">
  <img src="image.jpg" alt="Some Image">
  <div class="text">Some Text</div>
</div>

CSS代碼：

.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-container img {
  max-width: 100%;
  height: auto;
}
.img-container .text {
  margin-left: 10px;
}

在這個示例中，我們創(chuàng)建了一個名為“img-container”的容器，其中包含一個img元素和一個文本div，我們將容器設(shè)置為flexbox布局，并使用align-items和justify-content屬性將內(nèi)容居中，我們還設(shè)置了img元素的***大寬度為100%，高度自動，以確保圖像能夠適應(yīng)容器的大小，我們給文本div添加了一些左邊距，以使其與圖像之間有一定的間隔。

通過這種方法，我們可以輕松地在img元素中居中顯示文字，并且可以根據(jù)需要調(diào)整容器和元素的大小和位置。