2 つの子 div を含む div があり、それらは流動的なレイアウトの一部であることを意図しているため、固定サイズを px で設定できません。
ここには 2 つの目標があります。
2 つの子 div を水平方向に揃えます。これは、float: leftおよびfloat: rightそれぞれを使用して実現しました。
親 div に対して (子 div 内の) テキストを垂直方向に中央揃えにします。テキストは短く、設計上 1 行で表示されます。
私が今持っているもの: http://jsfiddle.net/yX3p9/
どうやら、2 つの子 div は親 div の高さ全体を使用しないため、テキストは親 div に対して垂直方向に中央揃えされません。
概念的には、上記の目標を達成するために、子 div を親 div 内で垂直方向に中央揃えにするか、子 div を親 div の高さいっぱいにすることができます。そうするための堅牢な方法は何ですか？
*ブラウザのサポート: IE 9+ およびその他の通常の最新ブラウザ。
上記の回答よりも変換の使用を好みます。
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
私の経験では、多くの状況で、すべての主要なブラウザー ( IE9+を含む) で動作します。
SCSS を使用している場合は、次の mixin を実装することもできます。
@mixin v-align($position: absolute){
position: $position; top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%); /* IE */
-moz-transform:translateY(-50%); /* Firefox */
-webkit-transform:translateY(-50%); /* Safari and Chrome */
-o-transform:translateY(-50%);
}
CSS テーブルを使用するだけでなく、絶対配置を使用して同様のレイアウトを取得することもできます。
HTML をそのまま (余分な要素なしで) 使用して、次の CSS を適用します。
html, body {
height: 100%;
width: 100%;
font-size: 13px;
}
.parent {
background-color: grey;
height: 20%;
line-height: 1.6em;
font-size: 1.6em;
min-height: 1.6em;
position: relative;
}
.left, .right {
position: absolute;
top: 50%;
margin-top: -0.8em;
}
.left {
background-color: yellow;
padding-left: 20px;
left: 0;
}
.right {
background-color: red;
padding-right: 20px;
right: 0;
}
デモ フィドルはhttp://jsfiddle.net/audetwebdesign/cByHa/で見ることができます。
コンテナーで、.parentline-height を明示的な値 (フォント サイズとして 1.6em) に設定し、テキストに十分な高position: relativeさmin-heightを維持します。
2 つの子要素.leftおよび.rightは絶対配置され、垂直方向のセンタリングを取得するためにtop: 50%
使用margin-top: -0.8emされます (line-height 値の半分を使用)。
左右のオフセット (またはパディング) を使用して、必要に応じて子要素の水平位置を調整します。
<div style="position:relative;white-space:nowrap">
<img style="visibility:hidden; width:1px; height:100%; verticle-align:middle" />
<img src="the-image-url" style="position:relative;left:-1px;" />
</div>
これはうまくいくはずです。