Как вертикально выровнять текст поверх абсолютно позиционированного div

У меня есть div, содержащий изображение шириной 30%. Также есть абсолютно позиционированный div, содержащий некоторый текст поверх этого. Я смог горизонтально выровнять текст, используя свойство text-align:center. Но как я могу выровнять один и тот же текст по вертикали, чтобы текст находился посередине изображения. vertical-align: middle, похоже, не работает в этом случае. HTML и CSS приведены ниже:Как вертикально выровнять текст поверх абсолютно позиционированного div

HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="StyleSheet.css" rel="stylesheet" /> 
</head> 
<body> 
    <div class="container"> 
     <div class="image"> 
      <img src="http://goo.gl/hPGFvG" /> 
     </div> 
     <div class="text"> 
      <p>TEXT</p> 
     </div> 
    </div> 
</body> 
</html>

CSS

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: 0; 
    font-family: 'Segoe UI', Arial, sans-serif; 
} 

p { 
    margin: 0; 
} 

img { 
    display: block; 
} 

.container { 
    position: relative; 
    width: 30%; 
    min-width: 320px; 
} 

.image { 
} 

    .image img { 
     margin: 0 auto; 
    } 

.text { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
}

источник

2014-02-16 user3316214

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

Например: если ваше изображение имеет высоту 300px, то:

.text{ 
position : absolute; 
top : -150px; 
}

Будьте осторожны, вы не можете использовать vertical-align:middle везде, есть много ссылок по этому поводу, вы должны проверить это: Centering in the Unknown ,

Удачи вам!

источник

2014-02-16 15:15:11 astrodedl

Как вертикально выровнять текст поверх абсолютно позиционированного div

ответ

Смежные вопросы