中心DIV內的H1標籤

我有一個body標籤內的以下DIV：中心DIV內的H1標籤

<div id="AlertDiv"><h1>Yes</h1></div>

而這些都是他們的CSS類：

#AlertDiv { 
    position:absolute; 
    height: 51px; 
    left: 365px; 
    top: 198px; 
    width: 62px; 
    background-color:black; 
    color:white; 
} 

#AlertDiv h1{ 
    margin:auto; 
    vertical-align:middle; 
}

我怎麼能垂直對齊和水平內H1 DIV？

AlertDiv會比上半年更大。

來源

2011-06-06 VansFannel

您可以添加到line-height:51px如果#AlertDiv h1你知道它永遠只能將是一行。另外加text-align:center到#AlertDiv。

#AlertDiv { 
    top:198px; 
    left:365px; 
    width:62px; 
    height:51px; 
    color:white; 
    position:absolute; 
    text-align:center; 
    background-color:black; 
} 

#AlertDiv h1 { 
    margin:auto; 
    line-height:51px; 
    vertical-align:middle; 
}

下面演示也使用負邊緣以保持集中於兩個軸的#AlertDiv，即使當窗口大小。

演示：jsfiddle.net/KaXY5

來源

2011-06-06 16:05:57 Marcel

是的，這將是隻有一條線。感謝您的回答。 – VansFannel 2011-06-06 16:07:17

這真的是唯一真正有效的答案：你使高度和行高相同，然後vertical-align CSS屬性將起作用。經過高和低的搜索，這是所有這一切出現。 – Femi 2011-06-06 16:13:06

<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;"> 
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1> 
</div>

你可以試試這裏的代碼：

http://htmledit.squarefree.com/

來源

2011-06-06 16:09:08

您可以添加填充到h1：

#AlertDiv h1 { 
    padding:15px 18px; 
}

來源

2011-06-06 16:10:27 kei

開始了的jsfiddlehere。

看起來水平對齊與text-align : center一起使用。仍然試圖讓垂直對齊工作;可能必須使用absolute定位和類似top: 50%或從頂部預先計算padding。

來源

2011-06-06 16:10:58 pixelbobby

有使用變換了新的途徑。將其應用於元素居中。它將集裝箱高度減半，然後「修正」一半的高度。

position: relative; 
top: 50%; 
transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%);

它在大多數情況下都有效。我也有一個問題，即一個div是一個div在li。列表項目設置了高度，並且外部div組成3列（基礎）。第二和第三列div包含圖像，並且它們使用這種技術居中良好，但是第一列中的標題需要具有明確高度集的包裝div。

現在，有沒有人知道如果CSS人正在努力的方式來對齊的東西，很容易？看到2014年，甚至是我的一些朋友經常使用互聯網，我想知道是否有人認爲集中會是一個有用的樣式功能。那麼我們呢？

來源

2014-01-24 12:11:36

我使用這種技術在'text-align：center;'無法正常工作的情況下水平對齊某些元素。 '位置：相對; left：50％; transform：translateX（ - ??％）...'「??」必須根據元素的寬度來調整。我知道這有點哈克，但似乎在我迄今嘗試過的屏幕上工作。 – whitebeard 2015-08-09 11:59:41

我發現使用'transform：translateX（ - ?? ??）'實際上，在各種屏幕尺寸下比'??％' – whitebeard 2015-08-11 01:44:11

更可靠完美，謝謝。 – MuriloKunze 2016-10-26 23:33:28

您可以使用display: table-cell將div呈現爲表格單元格，然後像在普通表格單元格中那樣使用vertical-align。

#AlertDiv { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

你可以在這裏嘗試一下： http://jsfiddle.net/KaXY5/424/

來源

2014-09-16 12:26:49

在HX標籤

width: 100px; 
margin-left: auto; 
margin-right: auto;

來源

2014-09-24 15:12:38 bluehallu

爲什麼自動向左/向右運行所需的寬度屬性？ – brookr 2017-01-05 20:01:17

中心DIV內的H1標籤

回答

相關問題