Вертикально и горизонтально центрирующий текст над изображением

Question

Я хочу иметь большое изображение шириной 100% и высотой около 70% экрана. На этом изображении я хочу добавить текст на этом изображении, и этот текст должен идти прямо посередине изображения. В двух словах: как я могу центрировать по горизонтали и вертикали этот текст в изображении с шириной 100%?:

<div id="top-area"> 
<img src="img/startphoto.jpg" alt="background image #1" /> 
<p>Some text</p> 
</div> 



#top-area img{ 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#top-area p{ 
    position: relative; 
    text-align: center; 
    margin-top: 330px; 

    color: white; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 3em; 
} 

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

Answer 1

Вы можете присвоить position:absoluteimg и p. Затем вы объявляете top:40%; на элементе p для вертикальной централизации его. Причина, по которой я использую 40%, объясняется размером используемого текста. Вы можете использовать 50%, а затем с javascript вычислить высоту текста и присвоить ему верхний отрицательный запас. Это требуется только в том случае, если высота текста будет динамически изменяться.

DEMO http://jsfiddle.net/fRbNe/

html, body { 
    height: 100%; 
} 
#top-area { 
    position: relative; 
    height: 70%; 
    width:100%; 
} 
#top-area img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
#top-area p { 
    margin:0; 
    padding:0; 
    text-align: center; 
    top:40%; 
    height: 100%; 
    width:100%; 
    position: absolute; 
    color: white; 
    font-family:'Montserrat', sans-serif; 
    font-size: 3em; 
} 

Answer 2

Вот ваш код переработан работать. Это делает верхнюю область той, которая определяет размер изображения, поскольку изображение просто заполняет пространство. Затем центрирует текст, перемещая его влево и топ-50% от размера верхней области, а затем переводит его обратно на 50% от размера p. Это верный способ для любого размера изображения и любого размера текста.

<div id="top-area"> 
    <img src="http://ts2.mm.bing.net/th?id=H.4836061304389953&pid=1.7" alt="background image #1" /> 
    <p>Some text</p> 
</div> 

#top-area { 
    position: relative; 
    width: 100%; 
    height: 70%; 
} 
#top-area img{ 
    width: 100%; 
    height: 100%; 
} 

#top-area p{ 
    position: absolute; 
    color: white; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 3em; 
    top: 50%; 
    left: 50%; 
    transform:translate(-50%, -50%); 
    -webkit-transform:translate(-50%, -50%); 
    -ms-transform:translate(-50%, -50%); 
} 

Codepen, чтобы увидеть его работы: http://cdpn.io/zFJgh

Answer 3

Я считаю, что ответ Тревиса требует поддержки браузера для фонового размера, который по-прежнему не хватает для IE8. Что-то, как это должно работать, хотя, размещение и изображение и пролетом в DIV:

div.largeImageContainer, 
img.largeImage{ 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 

div.largeImageContainer{ 
    top: 30%; 
    text-align: center; 
} 

span.largeImageText{ 
    position: relative; 
    top: 50%; 
    line-height: 16px; 
    margin-top: -8px; 
} 

Answer 4

Все предлагаемые решения до сих пор не «идеальным».
Прежде всего, если ваше изображение не принадлежит самому содержимому, не используйте элемент изображения. Вместо этого примените его как фоновое изображение.

Использование новых опций фона CSS3, которые вы можете дополнительно установить, например. размер фона, клип, -оригин и т. д.!

И для горизонтального и вертикального центрирования текста в элементе просто установите его отображаемое значение в «table-cell» и «text-align: center» и «vertical-align: middle» - вот и все.

<div id="top-area"> 
    <p>Some text</p> 
</div> 


html, body {height: 100%;} 

#top-area { 
    display: table; 
    width: 100%; 
    height: 70%; 
    border: 1px solid red; 
    /*background-image: ... */ 
} 

#top-area p { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

См jsFiddle

Поддержка браузеров: IE 8+ и все "современные" браузеры

PS: "Современный способ" будет использовать Flexbox