Question

在响应式Shopify网站中遇到悬停效果问题。真的与Shopify无关，而是与CSS无关。我的问题是，当我将鼠标悬停在此页面底部的两个图像上时（http://aworldcurated.com/），文本显示在中间（好）顶部（坏）。它应该在中间。我尝试添加一个vertical-align：middle;到了跨度，但还没有运气。任何人都知道我应该在哪里添加它，还是我必须重新考虑这个以获得响应？

这是HTML：

<div class="product span4">
    <div class="image">
      <div class="sample-product-wrapper">
        <a href="http://aworldcurated.com/pages/about-us" title="About a World Curated"><img src="https://cdn.shopify.com/s/files/1/0471/0045/t/1/assets/just-arrived%20Copy.jpg?9523409680747224875" title="About a World Curated" width="302" height="302"><span class="text-content"><span>About Us</span></span></a>
      </div>
    </div>
 </div>

CSS：

span.text-content {
  background: none;
  color: black;
  cursor: pointer;
  display: table;
  font-size: 30px;
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  text-transform: uppercase;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

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

Answer 1

如果您在浏览器中检查span，您会发现它不占用容器中的任何空间。您可以将其更改为div并将其设置为高度，以便vertical-align属性正常工作，或者使用css将其推送到容器中

.sample-product-wrapper .text-content {margin-top:45%;}

使用任何感觉正确的百分比。

Answer 2

您的图片的固定高度为302。一个简单的解决方案是将line-height的{{1}}属性与图像的高度相匹配：

<span>

Answer 3

这是一个很好的解决方案： absolute horizontal vertical centering

span.text-content{
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

在悬停时垂直居中div中的跨度

3 个答案: