0

起初，当我说居中时，我的意思是垂直居中和水平居中。

我有一个带有多个图块（div）的表格，例如在 Windows 8 中带有 background.images 的表格。每个图块都有一个带有描述和半透明背景的居中标签（也是一个 div）。

现在我想在磁贴本身和标签之间添加另一个 div。这些 div 应该有一个半透明的背景颜色作为底层 tile-image-div 的覆盖。

但是当我添加这个覆盖 div 时，我的标签不再水平居中，它被放置在图块的顶部。我怎样才能让它居中？

这是我在小提琴上的代码： fiddle （请看一下）


（小提琴代码中的问题是这一行：

<div class="SemiTransOverlay">
当我删除这个 div 时，一切都正确居中。我必须改变什么才能保持一切居中并保持 div？）

4

2 回答 2

1

首先，为什么您使用表格进行布局？我们是在 21 世纪，所以开始使用 div 和为了完成半透明的 div 放置在你需要使用的标签和垂直对齐的标签后面position: absolute;，top: -50%;我也修改line-height了div.SemiTransLabelGross和也使用了position: relative和z-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 { margin-top: 20%; }

于 2013-02-14T11:22:59.010 回答