Сосредоточить метку вертикально в таблице

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;

Я могу отцентрировать ярлык вручную, но он не будет работать для ярлыков другого размера.

Два ответа

Кажется, что ответы Натана Манусоса и Роба У работают хорошо.

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