まず第一に、私の謝罪。この問題に対してさまざまな解決策がここに投稿されていることは知っていますが、私の人生では、それらのどれも機能させることはできません。
レスポンシブ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>
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;
}
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*/
}
[〜#〜] 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;
}
フィドル: デモ
スパンタグ内にテキストを配置し、そのスパンの垂直方向の位置を中央に設定することに成功しました。ただし、これがどのようにクロスブラウザーに準拠しているかはわかりません。Webkitブラウザーでしかテストしていません。
これは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>