div
コンテナー内に2 つの sdiv
があり、子 div の 1 つを中央 (垂直および水平) に配置し、別の div をコンテナーの左上/右下に配置しようとしています。
両方の子div
にはテキストのみが含まれます。いくつか試してみたところ、これらのスタイルを個別に適用することができました。つまり、2 つdiv
の のうちの 1 つだけがあれば、必要に応じて機能します。両方のスタイルを同時に適用する方法がわかりません。位置と z-index をいじってみましたが、CSS
知識が限られているため、ブレークスルーを得ることができませんでした。
更新:テキストを外側のコンテナーに対して中心に配置したい。
HTML
Top left works
<div class="container">
<div class="topLeft">value</div>
</div>
Center Works
<div class="container">
<div class="center">label</div>
</div>
Both don't work simulaneously
<div class="container">
<div class="topLeft">value</div>
<div class="center">label</div>
</div>
CSS
.container {
border-width:1px;
width:200px;
border-style:solid;
display:table;
height:300px;
}
.center {
text-align:center;
display:table-cell;
vertical-align:middle;
z-index:5;
}
.topLeft {
text-align:left;
display:table-cell;
vertical-align:top;
z-index:10;
}
デモ
http://jsfiddle.net/jugal/E5zGw/
私は主に IE8+ と chrome をターゲットにしており、必要に応じて html と css の両方を柔軟に変更できます