中心标签垂直在表中

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; }