响应式Wordpress页面上图像上的文本垂直和水平对齐

Question

这是我正在工作的页面。

我正在使用Shortcodes Ultimate来获取列，并且它是响应式的。 现在，我正在尝试使图像上的文字悬停在背景上，最好暂时不使用JS。 如果给定了定义的高度和宽度，我可以使它完美地悬停，但是那没有响应。

在CodePen上，它显示整个页面上的标题，但是“ Shortcodes Ultimate”列将其消除。 但这也不是最好的设计。

我遵循了大约20种不同的教程来了解自己的位置，但现在却陷入困境。

密码笔

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%); 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而不改变背景的大小，因此我使用空白来定位和填充大小。

最后，我们需要在：hover上制作一些生动的动画

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

悬停时以.25s的透明度将不透明度从0更改为1。 大概就是这样，希望能有所帮助。 在这里查看CodePen