CSS по вертикали и по горизонтали положение текста по изображению

Я пытаюсь по вертикали и по горизонтали центровки Div banner_title в другой DIV, как это ...CSS по вертикали и по горизонтали положение текста по изображению

.box { 
 
    text-align: center; 
 
} 
 
.banner_title { 
 
    font-size: 32px; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
} 
 
.banner_title > div { 
 
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; 
 
    color: #fff; 
 
    padding: 15px; 
 
}

<div class="box"> 
 
    <img src="http://dummyimage.com/1000x400/b895b8/fff.jpg&text=+"> 
 
    <div class="banner_title"> 
 
    <div> 
 
     THIS MESSAGE IS A TEST MESSAGE 
 
    </div> 
 
    <button> 
 
     This is a test button 
 
    </button> 
 
    </div> 
 
</div>

также на https://jsfiddle.net/j90gaawb/

Это не работает для меня, может ли кто-нибудь помочь?

Это то, что я пытаюсь достичь ...

источник

2016-09-06 fightstarr20

Возможный дубликат [Как вертикально центрировать div для всех браузеров?] (Http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all- браузеры) – henry

Это дублирует многие существующие вопросы SO. Зайдите http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers и http://stackoverflow.com/questions/19461521/how-to-center- a-element-horizontally-and-verticalically/19461564 # 19461564 – henry

Я бы рекомендовал следующий метод

.box { 
 
    text-align: center; 
 
    display: table; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
.banner { 
 
    font-size: 32px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height; 
 
    auto; 
 
    background-image: url('http://dummyimage.com/1000x400/b895b8/fff.jpg&text=+'); 
 
    background-size: cover; 
 
} 
 
.banner_title { 
 
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; 
 
    color: #fff; 
 
    display: inline-block; 
 
} 
 
.banner_title > div { 
 
    padding: 15px; 
 
}

<div class="box"> 
 
    <div class="banner"> 
 
    <div class="banner_content"> 
 
     <div class="banner_title"> 
 
     THIS MESSAGE IS A TEST MESSAGE 
 
     </div> 
 
     <div> 
 
     <button> 
 
      This is a test button 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/j90gaawb/6/

источник

2016-09-06 20:50:17

Это то, что вы ищете?

.box { 
    text-align: center; 
    position: relative; 
    } 

.banner_title { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.banner_title > div { 
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;color: #fff; 
    padding: 15px; 
}

Fiddle: https://jsfiddle.net/j90gaawb/1/

источник

2016-09-06 20:39:43

Это отлично работает, но если я увеличу размер шрифта, он будет продолжаться до 2 строк, есть ли способ изменить эту точку останова? https://jsfiddle.net/j90gaawb/2/ – fightstarr20

Не оригинальный постер этого ответа, но как насчет чего-то подобного? https://jsfiddle.net/r53o7wqb/. Вы задаете ширину явно, но высота - динамическая. –

@ fightstarr20, который можно легко зафиксировать с помощью пробела: nowrap; см. https://jsfiddle.net/j90gaawb/4/ –

Попробуйте следующий CSS:

.banner { 
    position: relative; 
} 

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

источник

2016-09-06 21:11:14

CSS по вертикали и по горизонтали положение текста по изображению

ответ

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