0

最初、私が中央に配置されていると言うとき、私は垂直方向と水平方向の両方の中央に配置されていることを意味します。

私は、background.imagesを使用したWindows 8のように、いくつかのタイル（div）を持つテーブルを持っています。すべてのタイルには、説明と半透明の背景が付いた中央のラベル（divも）があります。

次に、タイル自体とラベルの間に別のdivを追加します。これらのdivは、基になるtile-image-divのオーバーレイとして半透明のbackground-colorを持っている必要があります。

しかし、このoverlay-divを追加すると、ラベルは水平方向の中央に配置されなくなり、タイルの上部に配置されます。どうすれば中央に配置できますか？

これはフィドルの私のコードです： フィドル （見てください）


（フィドルコードの問題は次の行です：

<div class="SemiTransOverlay">
このdivを削除すると、すべてが正しく中央に配置されます。すべてを中央に配置し、divを維持するには、何を変更する必要がありますか？）

4

2 に答える 2

1

まず第一に、なぜレイアウト目的でテーブルを使用しているのですか？position: absolute;私たちは21世紀にいるので、divの使用を開始し、使用する必要のあるラベルと垂直に配置されたラベルの後ろに配置する半透明のdivを実現するために、プロパティもtop: -50%;変更line-heightしました。div.SemiTransLabelGrossposition: relativez-index

デモ

CSS

table.Kacheln
{
    border-spacing: 5px;
    border-collapse:separate;
    border:0px;
}

.wrap {
    position: relative;
    height: 100%;
}

td.KachelFlavourGross01
{
    text-align:center;
    /*background:url(../img/Div/bg.jpg) no-repeat 0 0;*/
    background-color:#FF0000;
    width:404px;
    height:200px;

}

div.SemiTransOverlay
{   
    height:100%;
    width:100%;
    background-color:rgba(255, 255, 255, 0.5);
    position: absolute;
    z-index: 1;
}

div.SemiTransLabelGross
{
    font-size:2em;
    font-family:Verdana;
    font-style:italic;
    line-height:60px;
    background-color: rgba(255, 255, 255, 0.75);
    width:404px;
    height:60px;
    z-index: 2;
    position: absolute;
    top: 50%;
    margin-top: -30px; /* Half of height */
}
于 2013-02-14T11:26:18.137 に答える
-1

縦に並べて、私がやっていることは、paddingの代わりに設定することですheight。

例えば：

div.SemiTransLabelGross
{
    font-size:2em;
    font-family:Verdana;
    font-style:italic;
    line-height:120%;
    background-color: rgba(255, 255, 255, 0.75);
    width:404px;
    padding: 20px 0; /* removed the height property */
}

誤解して申し訳ありませんが、上記の回答から、淡いピンクのdiv自体を垂直方向の中央に配置したいと思います。paddingその場合は、その親に追加します。

div.SemiTransOverlay
{   
    width:100%;
    background-color:rgba(255, 255, 255, 0.5);
    padding: 20% 0;
}

または、マージンを追加できます

div.SemiTransLabelGross {マージントップ：20％; }

于 2013-02-14T11:22:59.010 に答える