Отзывчивое вертикальное выравнивание текста внутри абсолютно позиционированного div

Question

Я создаю галерею миниатюр. У меня есть это, где вы навеки над изображением, и вы видите название и описание. Я хочу, чтобы название и описание были сосредоточены внутри div.

Поскольку я позиционировал div для зависания как абсолютный, у меня возникли проблемы с использованием обычных методов таблицы для вертикального выравнивания. Всякий раз, когда я изменяю размер окна просмотра, текст больше не будет в центре.

Любая помощь с этим будет оценена по достоинству.

Вот jsfiddle пример: http://jsfiddle.net/Forresty/2snra4tL/1/

Вот код:

HTML:

<a class="work_item_link" href="#"> 
    <div class="work_item"> 
     <img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >         
     <div class="item_hover"> 
      <div class="item_description"> 
       <h4>Item Heading</h4> 
       <p>ITEM DESCRIPTION</p> 
      </div> 
     </div> 
    </div> 
</a> 

<a class="work_item_link" href="#"> 
    <div class="work_item"> 
     <img src="http://www.personal.psu.edu/ivs5030/plant.jpg"> 

     <div class="item_hover"> 
      <div class="item_description"> 
       <h4>Item Heading</h4> 
       <p>ITEM DESCRIPTION</p> 
      </div> 
     </div> 
    </div> 
</a> 

<a class="work_item_link_no_margin" href="#"> 
    <div class="work_item"> 
     <img src="http://www.personal.psu.edu/ivs5030/plant.jpg"> 

     <div class="item_hover"> 
      <div class="item_description"> 
       <h4>Item Heading</h4> 
       <p>ITEM DESCRIPTION</p> 
      </div> 
     </div> 
    </div> 
</a> 

CSS:

.work_item_link { 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    margin-right: 2%; 
    //overflow: hidden; 
    &:hover { 
     .item_hover { 
      opacity: 1; 
     } 
    } 
    img { 
     width: 100%; 
     display: block; 
    } 
} 
.work_item_link_no_margin { 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    //overflow: hidden; 
    &:hover { 
     .item_hover { 
      opacity: 1; 
     } 
    } 
    img { 
     width: 100%; 
     display: block; 
    } 
} 
.item_hover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: red; 
    opacity: 0; 
    transition: all 1s; 
} 

Answer 1

Я ответил на мой собственный вопрос.

Окончательный код можно увидеть здесь: http://jsfiddle.net/Forresty/2snra4tL/4/

Я добавил еще один DIV в виде таблицы, содержащей DIV, который содержит текст.

Еще раз спасибо.

HTML:

<a class="work_item_link" href="#"> 
          <div class="work_item"> 
           <img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >         
           <div class="item_hover"> 
            <div class="center"> 
            <div class="item_description"> 
             <h4>Item Heading</h4> 
             <p>ITEM DESCRIPTION</p> 
            </div> 
            </div> 
           </div> 
          </div> 
         </a> 
<a class="work_item_link" href="#"> 
          <div class="work_item"> 
           <img src="http://www.personal.psu.edu/ivs5030/plant.jpg"> 

           <div class="item_hover"> 
            <div class="center"> 
            <div class="item_description"> 
             <h4>Item Heading</h4> 
             <p>ITEM DESCRIPTION</p> 
            </div> 
            </div> 
           </div> 
          </div> 
         </a> 
<a class="work_item_link_no_margin" href="#"> 
          <div class="work_item"> 
           <img src="http://www.personal.psu.edu/ivs5030/plant.jpg"> 

           <div class="item_hover"> 
            <div class="center"> 
            <div class="item_description"> 
             <h4>Item Heading</h4> 
             <p>ITEM DESCRIPTION</p> 
            </div> 
            </div> 
           </div> 
          </div> 
         </a> 

SCSS:

.work_item_link { 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    margin-right: 2%; 
    &:hover { 
     .item_hover { 
      opacity: 1; 
     } 
    } 
    img { 
     width: 100%; 
     display: block; 
    } 
} 
.work_item_link_no_margin { 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    &:hover { 
     .item_hover { 
      opacity: 1; 
     } 
    } 
    img { 
     width: 100%; 
     display: block; 
    } 
} 
.item_hover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: red; 
    opacity: 0; 
    transition: all 1s; 
} 

.center{ 
    width: 100%; 
    height: 100%; 
    display: table; 
    text-align: center; 
} 

.item_description{ 
    display: table-cell; 
    vertical-align: middle; 

    p, h4{ 
     margin: 0; 
    } 
} 

Answer 2

Вот как выравнивать текст:

Горизонтально:

.item_description p, 
.item_description h4{ 
    text-align:center; 
} 

Вертикально:

.item_description{ 
    position: relative; 
    margin-top: 50%; 
    -webkit-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    transform: translateY(-100%);  
} 

Fixed Fiddle

Answer 3

FFF ...

им слишком поздно. Я надеялся, что смогу предоставить свой первый ответ ... Я сделал приятный fiddle для вас. моя техника:

transform: translate(-50%, -50%); 
top: 50%; 
left: 50%; 
position: relative;