Q&A
情報ありがとうございます
htmlとcssで文字の縦横中央寄せの方法を教えてください。
以下、「#header div」の設定方法が不明です。
html
1 2<body> 3 <header id="header"> 4 <div>この文字をheaderの縦横中央に表示させたい</div> 5 </header> 6</body> 7 8#header { 9 background: #00d700; 10 height: 120px; 11 width: 1020px; 12 margin: auto; 13} 14 15#header div { 16 margin: auto; 17 height: auto; 18 text-align: center; 19} 20
よろしくお願い致します。
回答2件
0
ベストアンサー
CSS
1#header{ 2 height:200px; 3 background:#666; 4 position:relative; 5} 6#header div{ 7 width:60%; height:2em; 8 background: #ccc; 9 text-align:center; 10 line-height:2em; 11 position:absolute; 12 margin: auto; 13 font-size: 2em; 14 top:0;right:0;bottom:0;left:0; 15}
widthやheightは適当です。
見易くするために色をつけてあります。
position:absoluteとmargin:autoの併用でdivが#headerの上下中央になります。
divのheightとline-heightを同じ値にすることでdivの中の文字が上下中央になります。
投稿2016/08/10 23:13
編集2016/08/10 23:17
総合スコア110
0
横方向：text-aligin
縦方向：vertical-align
vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。 なので標準の div には適用できません。 display
投稿2016/08/10 22:45
総合スコア610
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/11 00:12