标签在表格中垂直居中

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+。

Answer 2

好的，根据更新的图表，这是一个需要知道整个盒子的高度的解决方案。

这是实际操作： http://jsfiddle.net/raySU/

CSS:

  *{margin:0;padding:0;}
  #wrap{width:200px; height:200px; position:relative;}
  #wrap #images{position:absolute;}
  #wrap #images img{float:left;}
  #wrap #label{position:absolute; width:200px; height:200px;}
  #wrap #label table{width:100%; height:100%;}
  #wrap #label p{background-color:#eee;}

HTML:

<div id="wrap">

  <div id="images">
    <img src="http://placekitten.com/100" width="100" height="100" />
    <img src="http://placekitten.com/100" width="100" height="100" />
    <img src="http://placekitten.com/100" width="100" height="100" />
    <img src="http://placekitten.com/100" width="100" height="100" />
  </div>

  <div id="label">
    <table cellspacing="0" cellpadding="0">
      <tr>
        <td valign="center">
          <p>This is my label here isnt it great yes it is</p>
        </td>
      </tr>
    </table>
  </div>

</div>

Answer 3

如果你在桌子周围添加一个容器，你应该能够很容易地做到这一点。

<div class="container">
  <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>
  <p class="label">Your text here</p>
</div>

.container { 
  position: relative;
  float: left; }
.label { 
  position: absolute;
  top: 50%;
  right: 0;
  height: 18px; /* fixed height */
  margin: -9px 0 0; }