Тип центра вертикально в resizable div

Question

Я знаю, что на это ответили тысячу раз, но ничего не найдено, похоже, работает. У меня есть изображение полной ширины, которое изменяется с помощью окна навигатора. Затем у меня есть ящик в центре с текстом внутри. Ящик и тип изображения изменяются как ожидалось, но, похоже, я не могу создать тип с несколькими строками текста. Вот мой HTML:

<div class="block-full"> 
    <div class="info-box-full"> 
     <div class="slide-info"> 
      <span><?php echo $ss_slide_post_title?><br><?php echo $ss_slide_post_desc;?></span> 
     </div> 
    </div> 
<img src="<?php echo $image_link[0];?>" alt=""> 
</div> 

Вот мой CSS:

.block-full { 
    height: 0; 
    overflow: hidden; 
    padding-bottom: 45%; 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 
.info-box-full { 
    background-color: rgba(255, 255, 255, 0.8); 
    height: 26%; 
    margin-left: 40%; 
    position: absolute; 
    top: 37%; 
    vertical-align: middle; 
    width: 20%; 
    z-index: 9999; 
} 
.slide-info { 
    font-size: 1vw; 
    line-height: 1; 
    margin-top: 25%; 
    text-align: center; 
} 
span { 
    display: inline-block; 
    line-height: normal; 
    vertical-align: middle; 
} 

Спасибо за любую помощь!

Answer 1

Что вы хотите: style = "text-align: center" внутри тега html и который будет центрировать весь текст внутри тега в соответствии с размером контейнера относительно.

Answer 2

Используйте Flexbox.

Поддержка браузера: http://caniuse.com/#search=flexbox

Быстрый старт: http://css-tricks.com/snippets/css/a-guide-to-flexbox

* { margin:0; padding:0 } 
 

 
figure { 
 
    display: flex; 
 
    background: url('http://i.imgur.com/urlCI95.jpg'); 
 
    background-size: cover; 
 
    height: 200px; 
 
} 
 

 
figcaption { 
 
    color: white; 
 
    text-align: center; 
 
    margin: auto; 
 
}

<figure> 
 
    <figcaption>Vertically centered text.</figcaption> 
 
</figure>

редактируемые Demo: http://jsbin.com/fagopu/2