在CSS中，文本和圖片的對齊是一個常見的需求，要實現(xiàn)文本和圖片的對齊，可以使用多種方法，包括使用flexbox、grid布局或者定位屬性。

方法一：使用flexbox

Flexbox是一個用于管理一維布局的CSS3模塊，通過設(shè)定一個容器為flex布局，我們可以輕松地對齊文本和圖片。

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

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

方法二：使用grid布局

Grid布局是一個用于管理二維布局的CSS3模塊，通過設(shè)定一個容器為grid布局，我們可以輕松地實現(xiàn)對齊文本和圖片。

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

.grid-container {
  display: grid;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

方法三：使用定位屬性

通過設(shè)定圖片和文本的position屬性，我們可以***地控制它們的位置，這種方法適用于需要***控制的情況。

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

.relative-container {
  position: relative; /* 相對于其***近的定位祖先元素進行定位 */
}
.image {
  position: absolute; /* 相對于其***近的定位祖先元素進行定位 */
  top: 0; /* 頂部對齊 */
  left: 0; /* 左側(cè)對齊 */
}
.text {
  position: absolute; /* 相對于其***近的定位祖先元素進行定位 */
  top: 0; /* 頂部對齊 */
  right: 0; /* 右側(cè)對齊 */
}

1、Flexbox：適用于簡單的一維布局，通過設(shè)定容器為flex布局并設(shè)置align-items和justify-content屬性來實現(xiàn)對齊。

2、Grid布局：適用于復(fù)雜的二維布局，通過設(shè)定容器為grid布局并設(shè)置align-items和justify-content屬性來實現(xiàn)對齊。

3、定位屬性：適用于需要***控制的情況，通過設(shè)定元素的position屬性并設(shè)置top、left、right等屬性來實現(xiàn)對齊。