Текст по вертикали и по горизонтали выровнен по изображению на отзывчивым Wordpress странице

Question

Here's the page upon which I'm working.

Я использую Шорткоды Ultimate, чтобы получить столбцы, и это реагировать. Теперь я пытаюсь получить текст с фоном по изображениям, желательно без JS. Я могу заставить его отлично нависнуть, если ему задана определенная высота и ширина, но тогда это не реагирует.

В CodePen он отображает заголовок, проходящий через всю страницу, но столбцы Shortcodes Ultimate устраняют это. Но это, вероятно, тоже не лучший дизайн.

Я следил за 20 различными учебниками, чтобы добраться туда, где я есть, но сейчас застрял.

CodePen

HTML:

<div id="portfolio_hover_wrapper"> 
    <a href="#" class="wistia-popover"> 
    <img src="https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360" alt="" class="hover" /> 
    <span class="portfolio-hover-text"><span>ADO Rowing</span> 
    </a> 
</div> 

CSS:

#portfolio_hover_wrapper { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

#portfolio_hover_wrapper a { 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 


span.portfolio-hover-text { 
    background: rgba(27,187,230,0.8); 
    color: white; 
    display: table; 
    font-size: 3em; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    opacity: 0; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
} 



#portfolio_hover_wrapper a:hover span.portfolio-hover-text { 
    opacity: 1; 
} 

span.portfolio-hover-text span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 1

Если я понимаю, что вы хотите попробовать использовать top: 50%; transform: translateY(-50%); в .portfolio-hover-text.

Мой плохо, я понял ваш вопрос, попробуйте добавить следующее:

span.portfolio-hover-text { 
    background: rgba(27,187,230,0.8); 
    color: white; 
    display: block; 
    font-size: 3em; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
} 
span.portfolio-hover-text span{ 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%,-50%); 
    white-space: nowrap; 
} 

Answer 2

Для того, чтобы накладывать текст поверх изображения Я хотел установить родительский DIV, чтобы иметь изображение в качестве фона и ребенка текста ему нравится такой

<div class="box image1"> 
    <div class="overlay fade"> 
    <span class="text">ADO Rowing</span> 
    </div> 
</div> 

CSS

.box { 
    width: 75%; /*To make it responsive*/ 
    height: 40em;/*Height should be fixed*/ 
    box-shadow: inset 0px 2px 7px 0 rgba(0, 0, 0, .6);/*just for looks*/ 
    margin: 5% auto 0 auto; /*Centers the div*/ 
    border-radius: 5px; /*just for looks*/ 
    overflow: hidden; /*Needed if our text overflows*/ 
} 

.image1 { 
    background: url(https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360);/*Image*/ 
    background-size: cover;/*Makes the background look responsive*/ 
    background-position:center;/*for looks*/ 
} 

Теперь мы п чтобы стиль наложения. Подробнее CSS

.overlay { 
    background: rgba(33, 150, 243, .6);/*Overlay color*/ 
    text-align: center; 
    padding: 1em 0 1em 0;/*adjust this if you want it cover the entire img*/ 
    height:25%;/*Change this to 100% for whole image*/ 
    opacity: 0; 
    margin: 25% 0 0 0;/*Moves the banner down*/ 
    box-shadow: 0 2px 7px rgba(33, 150, 243, .4); 
} 
.text { 
    font-family: Helvetica; 
    font-weight: 900; 
    color: rgba(255, 255, 255, .85); 
    font-size: 96px; 
} 

Перетяжка увеличит размер Div и тем самым увеличить размер цвета, в то время как запас будет просто пространство в DIV без изменения размера фона, поэтому я использую маржу в положение и отступы для проклейки.

, наконец, мы должны сделать некоторую мгновенная анимацию: парить

.fade { 
    -webkit-transition: opacity .25s ease; 
    -moz-transition: opacity .25s ease; 
    -ms-transition: opacity .25s ease; 
    transition: opacity .25s ease; 
} 

.box:hover .fade { 
    opacity:1; 
} 

Это изменит непрозрачность от 0 до 1 по наведению с .25s tranisition. Это должно быть об этом, надеюсь, что это поможет. Просмотр CodePen Here