質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

7495閲覧

position: fixed;で、子要素を上下中央にしたい

redhat98

総合スコア236

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1グッド

0クリップ

投稿2015/08/20 23:27

画面上部にヘッダを表示して、その中の子要素を上下中央に表示したいです。
.data にline-heightを設定してとりあえず上下中央を実現することは出来たのですが、
これは正しい使い方なのでしょうか?

なんとなく、これは正しい使い方ではない気がしたので質問をしました。

ヘッダは画面上部に表示し続けたいので、#headerのpositionにはfixedを設定しています。

<div id="header"> <span class="data">データ1</span> <span class="data">データ2</span> </div>
#header { position: fixed; background-color:#f8f8f8; height:50px; width: 100%; border-bottom: solid; border-color: #e7e7e7; border-width: 1px; } .data { line-height: 50px; vertical-align: middle; color: #000; }
YuzuRyo61👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

やりたいことが実現できているのであれば、問題ないのではと思います^^

以下はご参考までに、、、
外の要素の高さを固定したら、中の要素の位置は50%で指定し、中の要素の高さの半分を引く
ことが多いようです。

↓は天地中央の例なので、横の部分を除いて考えればよいと思います。

<div id="center02"> <div class="inner"> <p>天地中央(position)<br> 天地中央(position)<br> 天地中央(position)</p> <!-- / .inner --></div> <!-- / #center02 --></div> #center02 { position:relative; /* 絶対配置の基準点 */ width:100%; /* 600px以下は幅いっぱいに広げる */ max-width:600px; /* 最大幅の指定 */ height:300px; /* 高さの指定 */ margin:0 auto; /* ブロック要素の中央揃え */ text-align:center; /* インライン要素の中央揃え */ background:#fff; /* 背景色 */ } #center02 .inner { position:absolute; /* 絶対配置 */ top:50%; /* 上から半分 */ left:50%; /* 左から半分 */ width:100%; /* 大枠と同じ幅に */ margin:-1.5em 0 0 -50%; /* 要素の大きさの半分引く */ }

「【CSS】様々な要素を中央揃えにする方法 - 02.positionを使って天地中央に要素を揃える」より抜粋

投稿2015/08/21 01:14

kaputaros

総合スコア1844

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問