在網頁設計中，正確的圖像和文本放置是非常重要的。在這篇文章中，我們將探討如何使用CSS使圖像和文本在網頁中居中。 圖像居中 要在網頁中居中一個圖像，我們需要使用以下CSS代碼： pre { display: block; margin: auto; } 以上代碼是通過設置display屬性為block，并使用margin屬性來實現居中的。 這段代碼中的margin:auto將自動計算圖像寬度和居中水平位置，這是這種方法工作的關鍵。我們可以將其應用于img元素，如下所示：

.center { display: block; margin: auto; } 在上面的代碼示例中，我們使用了.center類來實現圖像水平居中。請注意，我們將圖像嵌套在一個段落元素中，這是為了使該元素顯示為block。這將確保我們的居中樣式能夠正確工作。 字體居中 要在網頁中居中文本，我們可以使用以下CSS代碼： pre { text-align: center; display: flex; justify-content: center; align-items: center; } 在上面的代碼示例中，我們使用了display:flex屬性，將內容的對齊方式設置為居中。justify-content和align-items屬性用于將內容在水平和垂直方向上都居中。 使用以上的CSS代碼，我們可以在網頁上輕松地使圖像和文本居中。如果您想進一步完善自己的網頁設計技能，可以嘗試使用其他的CSS方法來實現更多的對齊方式。