今天我們來聊聊CSS中的圖片居中對齊與文字的問題。 首先，我們需要明確一點：在HTML文檔中插入圖片時，默認情況下圖片會“浮動”在文字周圍。這時，圖片的位置是由文檔流中的文字決定的，而不是由圖片本身的位置屬性控制的。這時候，我們需要使用CSS來調整圖片位置以及和文字的關系。 讓我們先來看一下，如何將圖片水平居中，并放置在段落中的位置。 我們可以使用以下代碼：

p {
text-align: center;
}
img {
display: block;
margin: 0 auto;
}

我們使用p標簽將文本居中。接下來，我們使用CSS將圖片設置為塊級元素（display: block），同時將左右外邊距設為auto（margin: 0 auto），這樣圖片就可以水平居中了。 而要讓圖片垂直居中，則有以下幾種方法： 1. 使用絕對定位 首先，我們需要將圖片的父元素設置為相對定位（position: relative），然后使用絕對定位將圖片居中：

p {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這里我們將圖片的位置設置為絕對定位（position: absolute），然后將top和left屬性均設置為50%，再使用transform屬性將其往上往左移動50%的寬高，即可將圖片垂直水平居中。 2. 使用flexbox布局 我們可以使用flexbox布局來輕松實現圖片垂直居中，只需要將img的父元素設為display: flex，并將justify-content和align-items屬性都設置為center即可。

p {
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}

這里我們還設置了圖片的最大寬高，這樣可以在圖片過大時自適應縮放。 以上就是關于CSS圖片居中對齊和文字的相關內容，希望對大家有所幫助。