CSS中讓圖片與文字居中顯示的方法

在CSS中，我們可以使用多種方法讓圖片與文字居中顯示，以下是一種簡(jiǎn)單有效的方法：

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

我們可以使用CSS的flexbox布局來讓圖片和文字居中，我們可以給容器元素添加以下樣式：

display: flex;
justify-content: center;
align-items: center;

這些樣式會(huì)告訴瀏覽器，容器內(nèi)的內(nèi)容應(yīng)該居中顯示。justify-content屬性負(fù)責(zé)水平居中，而align-items屬性負(fù)責(zé)垂直居中。

我們可以給圖片和文字添加樣式，以便更好地控制它們?cè)谌萜髦械娘@示，我們可以給圖片添加max-width: 100%樣式，以確保圖片不會(huì)超出容器的寬度，我們還可以給文字添加text-align: center樣式，以確保文字在容器中水平居中顯示。

我們需要將圖片和文字放入容器中，并給容器添加類名或其他標(biāo)識(shí)符，以便在HTML中引用。

<div class="container">
  <img src="image.jpg" alt="圖片">
  <p>這是一段文字</p>
</div>

在這個(gè)例子中，圖片和文字被放入了一個(gè)名為container的div元素中，我們可以通過給這個(gè)元素添加類名或其他標(biāo)識(shí)符，來在CSS中控制它的樣式。

使用CSS的flexbox布局可以讓圖片和文字居中顯示變得更加簡(jiǎn)單和容易，通過創(chuàng)建一個(gè)包含圖片和文字的容器，并給它添加適當(dāng)?shù)臉邮?，我們就可以輕松地實(shí)現(xiàn)圖片與文字的居中顯示。