タブのコンテンツを垂直方向にセンタリングしようとしていますが、CSSスタイルのdisplay:inline-flex
を追加すると、水平方向のtext-alignが消えてしまいます。
どのようにしたら、それぞれのタブのテキストアラインメントをxとyの両方にすることができますか?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
transform
translateX
/translateY
:[ここでの例][1] / [全画面での例][2] です。
サポートされているブラウザ]3(ほとんどのブラウザ)では、top:50%
/left: 50%
を translateX(-50%) translateY(-50%)
と組み合わせて使用すると、要素の垂直/水平方向のセンタリングを動的に行うことができます。
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
[ここでの例][4] / [全画面での例][5] を参照してください。
サポートしているブラウザ]6で、対象となる要素のdisplay
をflex
に設定し、垂直方向のセンタリングにはalign-items: center
、水平方向のセンタリングにはjustify-content: center
を使用します。また、ブラウザのサポートを強化するために、ベンダープレフィックスを追加することをお忘れなく ([例][7] を参照)。
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
table-cell
/vertical-align: middle
:[ここでの例][8] / [全画面表示の例][9] 。
場合によっては、html
/body
要素の高さが100%
に設定されていることを確認する必要があります。
垂直方向に配置するには、親要素の width
/height
を 100%
に設定し、display: table
を追加します。そして、子要素のdisplay
をtable-cell
に変更し、vertical-align: middle
を追加します。
水平方向のセンタリングについては、テキストとその他の inline
の子要素をセンタリングするために text-align: center
を追加することができます。または、要素が block
レベルであると仮定して、margin: 0 auto
を使用することもできます。
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
[ここでの例][10] / [全画面での例][11] です。
この方法では、テキストの高さが既知であることを前提としています(この例では18px
)。親要素を基準にして、要素を上から50%絶対的に配置します。要素の既知の高さの半分である負の
margin-top値を使用してください(この例では
-9px`)。
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
line-height
メソッド (最も柔軟性が低く、提案されていません)。[ここに例があります][12]。
親要素の高さが固定されている場合があります。垂直方向のセンタリングのためには、子要素の line-height
値を親要素の固定された高さと同じにすればよいのです。
ただし、この方法は、複数行のテキストがある場合には使えませんのでご注意ください。
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
[1]:
CSS3が選択可能な場合(またはフォールバックがある場合)は、transformを使用できます。
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
上記の最初の方法とは異なり、IE9+ではオーバーフローのバグがあるため、負の変換でleft:50%を使用することはできません。右の正の値を利用すれば、横スクロールバーが表示されなくなります。
もう一つの方法は、テーブルを使うことです。
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>