CSS 是前端開發中不可或缺的一部分，因為它可以控制網頁的樣式和布局。在前端開發中，顯示圖片也是非常重要的一點，因為圖片可以讓網頁更加生動和吸引人。本文將介紹如何使用 CSS 調整圖片的顯示位置。 一、使用 margin 調整圖片位置 當圖片的位置和周圍的元素重疊時，我們可以使用 margin 來調整它的位置。例如，我們可以使用以下 CSS 代碼將圖片移到右邊：

img {
margin-left: auto;
margin-right: 0;
}

這樣，圖片就會被移動到其父元素的右側，因為 margin-left 設置為 auto，而 margin-right 設置為 0。 二、使用 float 調整圖片位置 另一種調整圖片位置的方法是使用 float。通過使用 float，我們可以將圖片放在文本的左側或右側，使得文本圍繞圖片展開。例如，下面的 CSS 代碼將圖片浮動到左側：

img {
float: left;
margin-right: 10px;
}

這將使圖片浮動到其父元素的左側，并且在其右側保留 10 像素的空間，以防止周圍的文本太過緊密。 三、使用 position 調整圖片位置 在某些情況下，我們可能需要更精確地控制圖片的位置，這時，我們可以使用 position 屬性來調整它的位置。例如，下面的 CSS 代碼將圖片絕對定位：

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

這將把這張圖片移動到它最近的非 static 父元素中，并使其保持在垂直和水平方向上都居中。 總結：本文介紹了三種方法來調整圖片的位置，分別是 margin、float 和 position。使用這些方法，我們可以控制圖片的位置并讓它呈現出更好的效果，實現網頁布局的美化。