css - 在表格中垂直居中标签

Question

我正在尝试创建一个包含 4 个小图像和一个垂直居中的标签的布局，该标签可以有多行。标签位于图像之上并遮挡了图像。标签将动态切换。

我用 div 或表格完成了此操作，但遇到了同样的问题。这是我尽可能接近的表格版本:

p.label
{
    position: absolute;
    background: black;
    color:white;
    font-weight: bold;
    text-align:center;
    bottom:50%;
    margin:0;
    word-wrap: break-word;
}  

table.groupbox
{
    position:relative;
}

<table class="groupbox" cellspacing=0 cellpadding=0>
<tr>
<td><p class="label">two line<br>label</p>
    <img src="A.jpg" height=80 width=80></td>
<td><img src="B.jpg" height=80 width=80></td>
</tr>
<tr>
<td><img src="C.jpg" height=80 width=80></td>
<td><img src="D.jpg" height=80 width=80></td>
</tr>
</table>

这正确地使标签横跨整个表格，但它将标签的底部边缘置于垂直中心。如果我将标签的边距更改为如下所示:

margin: 0 0 -20px 0;

我可以手动将标签居中，但它不适用于不同尺寸的标签。

两个答案

Nathan Manousos 和 Rob W 的回答似乎都很有效。

Answer 1

这段代码将生成一个 160x160 大小的正方形。您可以根据需要调整宽度和高度。

CSS:

.groupbox, .groupbox .label-container {
  width: 160px;
  height: 160px;
}
.groupbox {
  position: relative;
}
.groupbox .label-container {
  display: table;
  position: absolute;
}
.groupbox .A, .groupbox .B, .groupbox .C, .groupbox .D{
  width: 50%;
  height: 50%;
  background-position: center;
  position: absolute;
  background-repeat: no-repeat;
}
.groupbox .A{background-image:url("A.jpg");top:0;left:0;}
.groupbox .B{background-image:url("B.jpg");top:0;right:0;}
.groupbox .C{background-image:url("C.jpg");bottom:0;left:0;}
.groupbox .D{background-image:url("D.jpg");bottom:0;right:0;}

.groupbox .label {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

HTML:

<div class="groupbox">
  <div class="A"></div><div class="B"></div>
  <div class="C"></div><div class="D"></div>
  <div class="label-container">
    <div class="label">Any text<br />With multiple lines</div>
  </div>
</div>

最终编辑

请记住，背景应该是背景。文本不应该因为背景而变得不可读。为此，您可以创建一个 1x1 透明图像:

.groupbox .label-container {
    background:url("transparent.png") repeat transparent;
}

您还可以使用 background-color:rgba(1,1,1,0.2)，其中 0.2 是透明度级别(0=不可见，1=完全可见)。此 CSS 属性适用于 FF 3+​​、Chrome、Safari 3+、Opera 10+ 和 IE 9+。