0

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 の両方を柔軟に変更できます

4

2 に答える 2

1

プロパティを使用して、.containerdivposition: relative;を指定position: absolute;してから子 div に同時に配置するだけです。lefttop

JsFiddle: http://jsfiddle.net/E5zGw/14

display: table-cellこのルートの場合は必要ないため、 を取り除く必要があります。

于 2013-02-27T15:39:49.290 に答える
0

あなたの細胞はのように振る舞っ<TD>てい<TR>ます。

DIVS を TableRow のようなものにカプセル化するだけです

http://jsfiddle.net/E5zGw/6/

背景色のjsFiddle

CSS が追加されました:

.table-row {
    display:table-row;
    clear:both;
}

HTML が追加されました:

<div class="container">
    <div class="table-row">
        <div class="topLeft">value</div>
    </div>
    <div class="table-row">
        <div class="center">label</div>
    </div>
</div>

魔女はまさに次のようなものです:

<table style="width:100%">
    <tr>
        <td valign="top" align="left">value</td>
    </tr>
    <tr>
        <td valign="middle" align="center">label</td>
    </tr>
</table>

、あなたがフィットさせたいと思うようにフィットさせてみましょう:

jsfiddle.net/E5zGw/15/

<div class="container">
    <div class="topLeft">value</div>
    <div class="center">label</div>
</div>

.topLeft {
    background-color:blue;
    text-align:left;
    display:table-cell;
    vertical-align:top;
    z-index:999;
    position:absolute;
    width:200px;
}
于 2013-02-27T15:37:44.623 に答える