web-dev-qa-db-ja.com

H1タグをDIVの中央に配置する

Bodyタグ内に次のDIVがあります。

<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;
}

DIV内でH1を垂直および水平に整列するにはどうすればよいですか？

AlertDivはH1より大きくなります。

cssvertical-alignmentalignment
36
VansFannel

line-height:51pxを#AlertDiv h1に追加できるのは、それが1行だけになることがわかっている場合です。また、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

37
Marcel

変換を使用する新しい方法があります。これを中央の要素に適用します。コンテナの高さの半分だけ下に移動し、要素の高さの半分だけ「修正」します。

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

ほとんどの場合に機能します。 divがdivにあるliにあるという問題がありました。リストアイテムには高さが設定されており、外側のdivsは3列で構成されています（Foundation）。 2列目と3列目のdivには画像が含まれており、この手法では中心がうまく調整されましたが、最初の列の見出しには明示的な高さを設定した折り返しdivが必要でした。

さて、CSSの人々が簡単に、ものを揃える方法に取り組んでいるかどうかを知っていますか？ 2014年と私の友人の何人かが定期的にインターネットを使用していることを見て、私はセンタリングがまだ便利なスタイリング機能であると考えている人がいるかどうか疑問に思いました。私たちだけですか？

10
Luke Puplett

HXタグ上

width: 100px;
margin-left: auto;
margin-right: auto;
7
bluehallu
<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/

2
Matthew Riches

h1にパディングを追加できます：

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

jsFiddlehere を開始しました。

水平配置はtext-align : center。垂直方向の調整を機能させようとしています。 absoluteポジショニングとtop: 50%または上から事前に計算されたpadding。

2
pixelbobby

display: table-cellを使用してdivをテーブルセルとしてレンダリングしてから、通常のテーブルセルで行うようにvertical-alignを使用できます。

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

ここで試すことができます： http://jsfiddle.net/KaXY5/424/

1
Nicu Surdu