首頁 > web前端 > css教學 > 主體

如何在div內垂直居中子元素?

Susan Sarandon
發布: 2024-11-27 16:57:10
原創
707 人瀏覽過

How to Vertically Center a Child Element Inside a Div?

在<div> 內垂直居中元素元素

在網頁中對齊元素時,了解相對於其視窗對齊元素或相對於其父容器對齊元素之間的差異至關重要。使用左時:50%;將元素置於整個視窗的中心,將元素與其直接父元素

<div> 對齊。需要不同的方法。

要在

<div> 內實現垂直居中,請按照以下步驟操作:
  1. 新增 text-align:center;到父級 <div>。這樣可以確保其所有子元素水平居中。
  2. 要讓子元素垂直居中,請應用 margin:auto;。這會指示瀏覽器自動調整元素的頂部和底部邊距,以均勻分配剩餘空間。
  3. 示範這一點的範例 HTML 和 CSS 程式碼:

    <div>
    登入後複製
    #parent {
      text-align: center;
    }
    
    #child {
      margin: auto;
    }
    登入後複製

    在此範例中,子元素在父元素

    <div> 內水平和垂直居中。

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

來源:php.cn
上一篇:如何在水平 HTML 和 CSS 選單中實現完全對齊的文字? 下一篇:如何自動調整文字大小以適應受約束的 Div?
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
關於CSS心智圖的課件在哪? 課件
來自於 2024-04-16 10:10:18
0
0
1758
相關專題
更多>
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板