首頁 > web前端 > css教學 > 如何在 CSS 中水平居中 Div 元素?

如何在 CSS 中水平居中 Div 元素?

Barbara Streisand
發布: 2024-12-23 10:24:28
原創
982 人瀏覽過

How Do I Horizontally Center a Div Element in CSS?

掌握

的水平居中使用 CSS 的元素

想像一個用

裝飾的頁面。元素安靜地漂浮在其中心,展示其內容與周圍的文字完美對齊。如何使用 CSS 輕鬆實現這一目標?讓我們揭開固定寬度和可變寬度
的最簡單方法。

固定寬度

對於

裝飾有預定的寬度,使用以下CSS 指令將其中心歸零是輕而易舉的:
#yourdiv {
  margin: 0 auto;
  width: 400px; /* Set the desired width */
}
登入後複製

可變寬度

當面對一個

;其寬度可能會波動,因此出現了一種狡猾的策略:
#wrapper {
  text-align: center;
}

#yourdiv {
  display: inline-block;
}
登入後複製

這種安排確保了 element 以其內容為中心,包括神秘的 。因此,無論內容的長度如何,

在您的網頁中心找到它應有的位置。

以上是如何在 CSS 中水平居中 Div 元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板