CSS HTML在td中放置几个​​居中的div

Question

首先，当我说居中时，我指的是垂直和水平居中。

我有一个带有几个tile（div）的表，就像Windows 8中的background.images一样。 每个瓷砖都有一个居中的标签（也是一个div），带有描述和半透明背景。

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

但是当我添加这个overlay-div时，我的标签不再水平居中，它被放置在拼贴的顶部。我怎样才能保持中心？

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

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

<div class="SemiTransOverlay">

当我删除此div时，所有内容都正确居中。 我需要改变什么来保持所有内容并保持div？）

Answer 1

首先为什么要使用表格进行布局？我们在21世纪，所以开始使用div并完成半透明div以放置标签和垂直对齐的标签，你需要使用position: absolute;和top: -50%;，我还修改了{{1 } line-height，还使用了div.SemiTransLabelGross和position: relative属性

Demo

CSS

z-index

Answer 2

垂直对齐，我所做的是设置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％; }