центр Вертикальный текст в элемент, который изменяет высоту и ширину

Question

Я следующий код

http://codepen.io/anon/pen/EZeVXG

HTML

<a href="#" class="col-inner"> 
<img src="http://placehold.it/450x450" /> 
<div class="content"> 
    <h3>Hello World</h3> 
    <p>Lorem Ipsum Dolor Sit Amet</p> 
</div> 
</a> 

CSS

img{ 
max-width: 100%; 
height: auto; 
} 
.col-inner{ 
position: relative; 
display: inline-block; 
} 
.content{ 
position: absolute; 
width: 90%; 
height: 90%; 
top: 5%; 
left: 5%; 
background-color: rgba(0,0,0,.7); 
color: #FFF; 
text-align: center; 
} 

Я пробовал кучу методы, найденные в Stack Overflow, но все работает, только если вы знаете ширину и высоту высота глаза наблюдателя Оба этих свойства будут меняться по мере того, как вы сгибаете браузер. Есть ли способ сохранить текст по вертикали целиком?

Answer 1

Я нашел этот трюк на StackOverflow, а я добавлю ссылку, как только я найти его снова:

height: auto; // (this is the default) 
position: absolute; 
top: 50%; 
transform: translateY(-50%); 

Это работает, потому что translateY берет высоту элемента, и top использует высоту окружающий элемент.

http://codepen.io/anon/pen/zNJvgg

Answer 2

Вы должны попытаться использовать flexbox и, если это возможно сделать некоторые изменения в вашем HTML.

На мой взгляд, чтобы сделать эту работу я хотел бы использовать:

HTML

<a href="#" class="col-inner"> 
    <div class="content"> 
    <h3>Hello World</h3> 
    <p>Lorem Ipsum Dolor Sit Amet</p> 
    </div> 
</a> 

CSS

.col-inner{ 
    max-width: 100%; 
    min-height: 150px; 
    position: relative; 
    background-image: url('http://placehold.it/450x450'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%; 
    display: flex; 
    justify-content:center; 
    align-items:center; 
} 
.content{ 
    color: #ff0000; 
} 

Я просто добавил изображение как background-image для тега, который действует как контейнер, и используется display: flex; justify-content:center; align-items:center по горизонтали & вертикально центрируйте текст и все элементы внутри контейнера.

Вы можете настроить height.col-inner и посмотреть, что независимо от высоты, которую он имеет, он всегда будет центрирован.

Я поставил codepen играть с ним: code

Имейте в виду, что если вы хотите использовать flexbox вы должны префикс кода. Используйте этот сайт caniuse, чтобы узнать, какие префиксы вы должны добавить в flexbox и связанные с ним свойства.