首頁 > web前端 > css教學 > 如何使用 CSS 將元素在其父 Div 中居中?

如何使用 CSS 將元素在其父 Div 中居中?

Susan Sarandon
發布: 2024-11-25 03:06:12
原創
1010 人瀏覽過

How to Center an Element Within Its Parent Div Using CSS?

將元素在父

內居中

使用left: 50%; 居中HTML 元素時,它會對齊該元素與整個瀏覽器視窗。然而,要將元素專門置於其父級

的中心,可以使用以下方法:元素,需要不同的方法。

要實現此目的,請指派 text-align:center;到父級

。這將使
中的所有內容居中,包括子元素。

接下來,加入 margin:auto;到子元素。這確保了子元素在父

內自動調整,無論其寬度或高度為何。

這是使用 CSS 的示範:

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
登入後複製

注意 margin:auto ;將子元素在父元素

內水平和垂直居中。

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

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