CSS技巧：實現(xiàn)圖片與文字的居中顯示

在網(wǎng)頁設計中，我們經(jīng)常需要將圖片與文字進行居中顯示，以增強頁面的視覺效果和用戶體驗，下面將介紹如何使用CSS來實現(xiàn)這一效果。

一、文本與圖片的垂直居中

要實現(xiàn)圖片與文字的垂直居中，我們可以利用CSS的flexbox布局或者grid布局，這兩種布局方式都可以輕松實現(xiàn)元素的居中對齊。

示例一：使用flexbox布局

HTML結構如下：

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

對應的CSS樣式：

.container {
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 子元素垂直居中對齊 */
  justify-content: center; /* 子元素水平居中對齊 */
  height: 100vh; /* 設置容器高度以適應視窗高度 */
}

這種方法適用于簡單的居中布局，可以輕松實現(xiàn)圖片和文字在容器中的垂直居中顯示。

二、文本環(huán)繞圖片的水平居中

當需要將圖片置于頁面中心，并且希望文字環(huán)繞圖片水平居中顯示時，我們可以使用CSS的margin屬性來實現(xiàn)，首先確保圖片本身水平居中，然后通過調整左右邊距來使文本環(huán)繞圖片。

示例二：文本環(huán)繞圖片的水平居中

HTML結構：

<div class="text-wrapper">
  <div class="image-container">
    <img src="image.jpg" alt="示例圖片">
  </div>
  <p>這是一段環(huán)繞圖片的示例文字。</p>
</div>

對應的CSS樣式：

.text-wrapper {
  text-align: center; /* 文本居中 */
}
.image-container {
  display: inline-block; /* 使圖片成為行內塊級元素 */
  margin: auto; /* 自動調整左右邊距實現(xiàn)居中 */
}
``` 這種方法適用于需要文字環(huán)繞圖片的場景，通過調整邊距和文本對齊方式實現(xiàn)整體的水平居中效果，在實際應用中可以根據(jù)具體需求選擇適合的布局方式。