html - 在图像上垂直居中文本 - 动态

Question

当有人将鼠标悬停在图像上时，我有图像和显示在图像中心的文本。

HTML 看起来像这样:

<article>
<div class="entry-content">
<a href="http://www.linktopost.com">
<h3 class="entry-title">Ring #1</h3>
<img width="620" height="387" src="http://i.telegraph.co.uk/multimedia/archive/02725/scotch-whisky_2725818b.jpg" class="aligncenter" alt="Platzhalter_3">
</a>
</div>
</article>

CSS:

article {
  float:left;
  width:30%;
  display:block;
}

.entry-content {
  width: 620px;
  margin: 0 auto;
  position: relative;
  height: 387px;
}

.entry-content:hover .entry-title {
  color: #000;
  display: table-cell;
  background-color: #fff;
  opacity: 0.75;
}

.entry-title {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
  line-height: 387px;
  text-align: center;
  display: none;
}

article img {
  position:absolute;
}

你可以在这里看到: http://codepen.io/anon/pen/rOXOez

是否有机会不在 CSS 中使用固定像素值 - 以便悬停效果有效并适用于任何图片？在这个例子中，我不得不在 CSS 中使用图片的宽度和高度来实现我想要的。

谢谢!

Answer 1

解决方案一:

相对/绝对定位和居中 transform: translate()

https://jsfiddle.net/94efk8kz/

article {
  position: relative;
}

.hover-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  color: black;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hover-content h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

解决方案 2:

flex 盒

https://jsfiddle.net/94efk8kz/1/

article {
  position: relative;
}

img {
  width: 100%;
}

.hover-content {
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: white;
  color: black;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

方案三

CSS 表格

https://jsfiddle.net/94efk8kz/2/

.entry-content  a {
  float: left;
  width:30%;
  position: relative;
  height: 100%;
}


.hover-content {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: white;
  color: black;
  opacity: 0;
  bottom: 0;
  right: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


.v-align {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.hover-content h3 {
  display: table-cell;
  vertical-align: middle;
}