从文本行中心转换

Question

我将css应用于一行文本（font-size），但它从左侧动画，我希望它从中心动画。我正在使用Bootstrap框架，所以div是以vert / horiz为中心。

HTML

<article class="col-md-12">
   <div class="lg-indx-img">
    <a href="..." class="linkage"></a>
    <div class="cat-icn">
        <?php the_title(); ?>
    </div>
  </div>
</article>

CSS

article {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
}

.linkage {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.lg-indx-img { padding: 20% 0; }

.cat-icn {
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 50%;
    opacity: 0;
    font-size: 15px;
    color: #fff;
    text-align: center;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.linkage:hover + .cat-icn {
    opacity: 1;
    font-size: 25px;
}

当.linkage悬停时，.cat-icn中的标题会增加。我不知道文本行的长度，因为它是由Wordpress发布的。

编辑 - 顶部图片是它现在所做的，底部图片是我想要它做的事情

Answer 1

您可以尝试使用transform属性，而不是设置新的字体大小，因为您已将transform-origin设置为中心，所以该属性应该是正确的。

.linkage:hover + .cat-icn {
  transform: scale(1.5);
}

Answer 2

试试这个。

http://codepen.io/Chevex/pen/bdRvvJ

.linkage:hover + .cat-icn {
  opacity: 1;
  transform: scale(3);
}

而不是为字体大小设置动画，而是为transform属性设置动画。然后在您的悬停规则中使用transform属性来调整元素的比例。