CSS: Как центрировать текст по вертикали и по горизонтали над изображением

Все, что я хочу сделать, это центр моего текста по вертикали и по горизонтали на IMG ..CSS: Как центрировать текст по вертикали и по горизонтали над изображением

Пробовал много вещей, но ничего не работает до сих пор:/

<div class="img_container"> 
    <img class="cover-image" src="img.jpg" alt="omg" /> 
    <h2> bla bla bla </h2> 
    </div> 

    .img_container { 
    width: 100%; 
    } 

    .img_container h2 { 
    margin: 0; 
    }

источник

2016-06-09 Unknown User

Проверьте другой [вопрос] (http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) может быть то, что вы ищете – T04435

Просто используйте положение абсолютным и переведите. Будет идеальным центрированных (по горизонтали и по вертикали)

.img_container { 
 
    position: relative; 
 
} 
 
.img_container img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.img_container h2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); /* iOS */ 
 
    transform: translate(-50%, -50%); 
 
}

<div class="img_container"> 
 
    <img class="cover-image" src="http://lorempixel.com/400/200/sports/" alt="omg" /> 
 
    <h2> bla bla bla </h2> 
 
</div>

источник

2016-06-09 09:00:12

Большое спасибо! Не думал об этом решении ... Это довольно хорошо. –

Это хорошее решение, потому что вам не нужно знать размер элемента, чтобы центрировать его вертикально и горизонтально. Добро пожаловать :) –

1) Вы можете просто поместить изображение на фоне изображения-контейнера и просто дать свойства CSS для контейнера изображения, как

style="vertical-align:middle and text-align center"

Или

2) Вы можете использовать эти классы и получить работу.

.image { 
    position:relative; 
} 

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

где HTML код будет как

<div class="image"> 
    <img src="sample.png"/> 
    <div class="text"> 
     Text of variable length 
    </div> 
</div>

источник

2016-06-09 09:00:50

Вот хороший Tuto сделать это: css-tricks.com - Text Blocks Over Image.

В принципе, вы можете исправить текст с position: absolute затем переместить его, где вы хотите с top, left и т.д.

источник

2016-06-09 09:04:06 QuidamAzerty

Пожалуйста, см. Ответ Маркоса Переса Гуда. На мой взгляд, ответ Маркоса улучшает это решение, лучше и более подходит для того, какие инструменты у нас есть в наши дни, а не когда эта статья вышла 7 лет назад. .. –

еще один способ реализации этого:

.img_container { 
 
    width: auto; 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 

 
.img_container h2 { 
 
    position: absolute; 
 
    top: 40%; /* adjust accordingly to suit requirements */ 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
}

<div class="img_container"> 
 
    <img class="cover-image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250" alt="omg" /> 
 
    <h2>Postioned Absolute</h2> 
 
    </div>

источник

2016-06-09 09:10:59 UncaughtTypeError

CSS: Как центрировать текст по вертикали и по горизонтали над изображением

ответ

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