Разместить текст в центре над изображением

Я хочу разместить текст H2 по вертикали & горизонтально над моим изображением.Разместить текст в центре над изображением

Может кто-нибудь объяснить, как я это делаю?

https://jsfiddle.net/q3odxfmb/

<div class="content"> 
 

 
<img src="http://placehold.it/940x510"> 
 
<h2> 
 
TEXT WILL GO HERE 
 
</h2> 
 

 
</div>

источник

2016-02-13 michaelmcgurk

это лучший вариант https://jsfiddle.net/q3odxfmb/1/ @michaelmcgurk –

Конечно это - получение зеленой галочкой после поспешат -) – michaelmcgurk

скрипку https://jsfiddle.net/q3odxfmb/1/

img { 
    max-width: 100%; 
    vertical-align: middle; 
} 

#container { 
    position: relative; 
} 

#text-outer { 
    height: 100%; 
    margin-left: 12.5%; 
    position: absolute; 
    top: 0; 
    width: 75%; 
} 

#text-inner { 
    color: #fff; 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 100%; 
}

этот вопрос уже задавали много раз, пожалуйста, смотрите эту ссылку

спасибо всего

Text Above Image CSS Z-Index Not Working

источник

2016-02-13 07:11:19

Большое спасибо, Гаутам Джа! Отличный день :-) – michaelmcgurk

рад помочь вам :) @michaelmcgurk –

установить текст в качестве фона над DIV, и в центре текста над делами.

HTML:

<div class="content"> 
    <h2 id="mytext"> 
    TEXT WILL GO HERE 
    </h2> 
</div>

CSS:

div { 
    background: url("<image-link>") 
} 

#mytext { 
    line-height: 510px; 
    vertical-align:middle; 
    text-align: center; 
}

источник

2016-02-13 07:11:51 cst1992

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

Если высота линии не установлена в высоту div, вертикальное выравнивание не будет работать. Вероятно, вы можете удалить выравнивание по вертикали, но вам придется использовать линейную высоту. – cst1992

Да точно. Высота линии обычно - это путь в таких ситуациях! Вертикальное выравнивание используется для использования LOT! Но он работает лучше, если вы точно знаете, что в родительском div есть один дочерний элемент. –

Это довольно просто. Просто установите CSS для:

.h2 { 
line-height:/*height of your image*/ 
}

Затем установите предел в DIV для авто:

div { 
    background-url: <image-link>; 
    margin:auto 
}

Это должно центрировать это прекрасно.

Для этого метода у вас должен быть небольшой запас.

Вот в JSBin с легким методом, тоже: https://jsbin.com/vawowebolu/edit?html,css,js,output

источник

2016-02-13 07:14:16

Спасибо, Джастин. Сейчас я попробую. – michaelmcgurk

Нет проблем, я обновил ответ с помощью JSBin для еще одного простого способа сделать это. :) –

Разместить текст в центре над изображением

ответ

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