Question

我在通过Wordpress引入的文章中有文本div。（布局使用Bootstrap 3框架）当.linkage悬停时，div会放大。一切正常（水平居中，从文本的中心增长），除了它与文章的顶部对齐。我尝试了各种垂直居中的方法，但似乎无法让它发挥作用。

HTML

<article class='col-md-12'>
    <div class="bg-img" style="background-image:url('...');">
        <a href="#" class="linkage"></a>
        <!-- Put cat div overtop article -->
        <div class="cat-cell">
            <div class="cat-border">
                <h1><?php the_title(); ?></h1>
                <h2><?php the_category(' | '); ?></h2>
            </div>
        </div>
        <div class="cover"></div>
    </div>
    <!-- / bg-img -->
</article>

CSS 文章{ 位置：绝对; margin-bottom：10px; }

.bg-img {
  position: relative;
  background-size: cover;
  width: 100%;
  height: 400px;
}

.cat-border { 
  position: relative;
  display: inline-block;
  border: 1px solid #fff; 
}

.cat-cell {
  position: relative;
  z-index: 9;
  opacity: 0; 
  text-align: center;
  max-width: 40%;
  margin: 0 auto;

  transform-origin: 50% 50%;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;    
  transition: all 0.4s ease;
}

.linkage:hover + .cat-cell {
  opacity: 1;
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
}

Answer 1

CSS文章{position：absolute; margin-bottom：10px; }

如果你想使用绝对定位（这是不寻常的......）

尝试：

article { position: absolute;
          top:50%;
          transform: translateY(-50%)
          }

如果你想让它水平居中：

article { position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%)
          }

Answer 2

我不知道它是否适合您的问题，但请看这篇文章https://css-tricks.com/centering-in-the-unknown/

垂直对齐未知宽度的文本

2 个答案: