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伪元素：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这是通过将文本包装在一个范围中并将此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

将文本换行到另一个元素中，然后设置顶部：

<强> 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 3

使用悬停的伪元素image将文字对齐:before的中心。

.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>

Answer 4

水平和垂直居中可以轻松实现的绝对元素

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

如何垂直居中悬停元素文本？

4 个答案: