Как вертикально центрировать текст элемента наведения?

Question

У меня есть текстовый элемент, который появляется над изображением при наведении курсора мыши. Текстовый бит горизонтально центрирован, но у меня все еще возникают проблемы с его вертикалью, несмотря на несколько методов. Пытаюсь добиться этого без Javascript.

HTML:

<figure class="wp-caption-my"> 
    <img class="demo-my" src="image.png" alt="Image" /> 
    <figcaption class="wp-caption-text-my">This is a caption text</figcaption> 
</figure> 

CSS:

.wp-caption-my { 
position: relative; 
padding: 0; 
margin: 0; 
} 

.wp-caption-my img { 
display: block; 
max-width: 100%; 
height: auto; 
} 

.wp-caption-text-my { 
opacity: 0; 
position: absolute; 
width: 100%; 
height: 100%; 
color: #fff; 
left: 0; 
bottom: 0; 
padding: 0.75em 1em; 
font-weight: 700; 
z-index: 2; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
background-color: rgba(0,191,255,0.9); 
text-align: center; 
-webkit-transition: opacity .3s ease-in-out !important; 
transition: opacity .3s ease-in-out !important; 
} 

.wp-caption-my:hover .wp-caption-text-my { 
opacity: 1; 
} 

img.demo-my { 
width: 100% !important; 
height: 100% !important; 
} 

Answer 1

Я думаю, вы можете использовать CSS псевдо-элементов таким образом:

.wp-caption-my { 
 
position: relative; 
 
padding: 0; 
 
margin: 0; 
 
} 
 

 
.wp-caption-my img { 
 
display: block; 
 
max-width: 100%; 
 
height: auto; 
 
} 
 

 
.wp-caption-text-my { 
 
opacity: 0; 
 
position: absolute; 
 
width: 100%; 
 
height: 100%; 
 
color: #fff; 
 
left: 0; 
 
bottom: 0; 
 
padding: 0.75em 1em; 
 
font-weight: 700; 
 
z-index: 2; 
 
-webkit-box-sizing: border-box; 
 
box-sizing: border-box; 
 
background-color: rgba(0,191,255,0.9); 
 
text-align: center; 
 
-webkit-transition: opacity .3s ease-in-out !important; 
 
transition: opacity .3s ease-in-out !important; 
 
} 
 

 
.wp-caption-my:hover .wp-caption-text-my { 
 
opacity: 1; 
 
} 
 

 
.wp-caption-text-my::before { 
 
content: ""; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
.wp-caption-text-my span { 
 
display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
img.demo-my { 
 
width: 100% !important; 
 
height: 100% !important; 
 
}

<figure class="wp-caption-my"> 
 
    <img class="demo-my" src="http://janisweb.tk/grahams/wp-content/uploads/2016/07/officewaste.png" alt="Image" /> 
 
    <figcaption class="wp-caption-text-my"><span>This is a caption text</span></figcaption> 
 
</figure>

Это делается путем оборачивания текста в пролете и добавить этот CSS к вашим стилям:

.wp-caption-text-my::before { 
    content: ""; 
    display: inline-block; 
    width: 0px; 
    height: 100%; 
    vertical-align: middle; 
} 

.wp-caption-text-my span { 
    display: inline-block; 
    vertical-align: middle; 
} 

Answer 2

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

position: absolute 
margin: auto; 
top: 0; left: 0; bottom: 0; right: 0; 

скрипки здесь: http://jsfiddle.net/mBBJM/1/

из https://codemyviews.com/blog/how-to-center-anything-with-css#comment-684580538

Answer 3

Wrap текст внутри другого элемента, и установить верхний:

HTML

<figcaption class="wp-caption-text-my"><h3>This is a caption text</h3></figcaption> 

CSS

.wp-caption-text-my h3 { 
    position: relative; 
    top: 50%; 
    line-height: 18px; 
    margin-top: -18px; 
} 

Проверьте это с большим текстом:

Codepen: https://codepen.io/anon/pen/LkAyEd

Answer 4

Выравнивание текста до центра вашего image, используя псевдоэлемент :before on-hover.

.wp-caption-text-my:before{ 
    content:''; 
    display:block; 
    width:100%; 
    height:50%; 
    background:#f22; 
} 

Я добавил background color to pseudo element, чтобы вы могли понять, что он делает, и тогда вы можете привести его в соответствии с вашими потребностями.

.wp-caption-my { 
 
position: relative; 
 
padding: 0; 
 
margin: 0; 
 
} 
 

 
.wp-caption-my img { 
 
display: block; 
 
max-width: 100%; 
 
height: auto; 
 
} 
 

 
.wp-caption-text-my { 
 
opacity: 0; 
 
position: absolute; 
 
width: 100%; 
 
height: 100%; 
 
color: #fff; 
 
left: 0; 
 
bottom: 0; 
 
padding: 0.75em 1em; 
 
font-weight: 700; 
 
z-index: 2; 
 
-webkit-box-sizing: border-box; 
 
box-sizing: border-box; 
 
background-color: rgba(0,191,255,0.9); 
 
text-align: center; 
 
-webkit-transition: opacity .3s ease-in-out !important; 
 
transition: opacity .3s ease-in-out !important; 
 
} 
 
.wp-caption-text-my:before{ 
 
    content:''; 
 
    display:block; 
 
    width:100%; 
 
    height:50%; 
 
    background:#f22; 
 
} 
 
.wp-caption-my:hover .wp-caption-text-my { 
 
opacity: 1; 
 
} 
 

 
img.demo-my { 
 
width: 100% !important; 
 
height: 100% !important; 
 
}

<figure class="wp-caption-my"> 
 
    <img class="demo-my" src="https://source.unsplash.com/random" alt="Image" /> 
 
    <figcaption class="wp-caption-text-my">This is a caption text 
 
    <figcaption style="padding-top:5px;">Add such more captions</figcaption> 
 
    <figcaption style="padding-top:5px;">And style them as you want.</figcaption> 
 
    </figcaption> 
 
</figure>