web-dev-qa-db-ja.com

divのH1を垂直方向に中央揃えするにはどうすればよいですか？

まず第一に、私の謝罪。この問題に対してさまざまな解決策がここに投稿されていることは知っていますが、私の人生では、それらのどれも機能させることはできません。

レスポンシブWebサイトの場合、divのh1を中央に配置しようとしています。

水平方向の中央揃えは問題ではありませんが、垂直方向の中央揃えに問題があります。おそらく、私はここで見つけた説明（またはその両方）について何か間違ったことや誤解をしているのでしょう。

だからおそらく間違った方法で以前のソリューションを解釈しているので、誰かがh1を垂直に中央に置くために下のコードに追加する必要があるものを正確に説明してもらえますか？

（この質問をできる限り多くの人々に関連させるために、私はすでに自分自身でそうしようとする以前のすべての試みのコードを削除しました。）

CSS：

html, body {
height: 100%;
margin: 0;
}

#section1 {
min-height: 90%; 
text-align:center
}

HTML：

<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>
htmlcssresponsive-design
41
Edward Touw

display:table-cellを使用して垂直方向の整列を実現できます。

#section1 {
    height: 90%; 
    text-align:center; 
    display:table;
    width:100%;
}

#section1 h1 {display:table-cell; vertical-align:middle}

例

更新-CSS3

垂直方向の位置合わせの代替方法として、最新のすべてのブラウザーでサポートされる必要がある次のcss 3を使用できます。

#section1 {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

更新されたフィドル

104
Pete

displayプロパティでこれを実現できます：

html, body {
    height:100%;
    margin:0;
    padding:0;
}
#section1 {
    width:100%; /*full width*/
    min-height:90%;
    text-align:center;
    display:table; /*acts like a table*/
}
h1{
    margin:0;
    padding:0;
    vertical-align:middle; /*middle centred*/
    display:table-cell; /*acts like a table cell*/
}

デモ： http://jsfiddle.net/a3Kns/

5
melancia

[〜＃〜] html [〜＃〜]

<div id='sample'>
<span class='vertical'>Test Message</span>
</div>

[〜＃〜] css [〜＃〜]

    #sample 
    {
        height:100px;
         width:100%;
        background-color:#003366;
        display:table;
        text-align: center;

    }
    .vertical 
    {
           color:white;
         display:table-cell;
        vertical-align:middle;
}

フィドル： デモ

1
Amarnath Balasubramanian

スパンタグ内にテキストを配置し、そのスパンの垂直方向の位置を中央に設定することに成功しました。ただし、これがどのようにクロスブラウザーに準拠しているかはわかりません。Webkitブラウザーでしかテストしていません。

1
benadamstyles

これはjQueryメソッドです。過剰に見えますが、オフセットを計算します。

<html>
<head>
<title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/dreamerslab/jquery.center/master/jquery.center.js"></script>
    <script type="text/javascript">
        $(function(){

            $('#jquery-center').center();

        });
    </script>

</head>
<body>
    <div id="jquery-center" style="position:absolute;">
       <h1>foo</h1>
    </div>
</body>
</html>
0
smoore4