CSS圖片和文字的對齊是網(wǎng)頁設(shè)計中常見的問題，通常涉及到如何讓圖片與文字在垂直或水平方向上對齊，以下是一些常用的CSS技巧和方法，幫助你實現(xiàn)圖片和文字的對齊。

1. 垂直對齊

垂直對齊圖片和文字通?？梢酝ㄟ^設(shè)置vertical-align屬性來實現(xiàn)，如果你想讓圖片與文字在頂部對齊，可以這樣做：

img {
    vertical-align: top;
}

如果你想讓圖片與文字在底部對齊，可以設(shè)置vertical-align: bottom;。

2. 水平對齊

水平對齊圖片和文字通?？梢酝ㄟ^設(shè)置margin或padding屬性來實現(xiàn)，如果你想讓圖片與文字在左側(cè)對齊，可以這樣做：

img {
    margin-right: 10px; /* 圖片和文字的間隔 */
}

如果你想讓圖片與文字在右側(cè)對齊，可以設(shè)置margin-left: 10px;。

3. 使用Flexbox布局

Flexbox布局是一種強(qiáng)大的CSS布局工具，可以用來對齊圖片和文字，你可以創(chuàng)建一個flex容器，并將圖片和文字作為flex項放入其中：

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

4. 使用Grid布局

CSS Grid布局是另一種強(qiáng)大的布局工具，可以用來創(chuàng)建復(fù)雜的網(wǎng)頁布局，你可以創(chuàng)建一個grid容器，并將圖片和文字放置在不同的grid單元中，通過調(diào)整grid單元的排列方式，可以實現(xiàn)圖片和文字的對齊。

垂直對齊：使用vertical-align屬性或Flexbox的align-items屬性。

水平對齊：使用margin或padding屬性或Flexbox的justify-content屬性。

復(fù)雜布局：使用CSS Grid布局。