Question

我目前正在使用CSS3垂直对齐方法，使用transform来垂直对齐包含文本和文本链接内容的div。好的是它有效，坏的是在Chrome上，只要鼠标悬停在文本上，文本就会摆动。

编辑：主要是使用标签，如果您将测试网站向下滚动到图像帖子并将鼠标悬停在文本上，然后再重新打开，您就可以轻松摆动。

Test site = http://fivdiv.tumblr.com/

/*CSS*/
.tile-text-wrapper.photo {
position: absolute;
right: 10px;
left: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%)
}

<!-- HTML markup -->
<div class="tile-text-wrapper photo">
    <a class="tile-title photo" href="#">Link Text</a>
    <a class="tile-read-more photo" href="#"><small>Photo Post</small></a>
</div>

如果有人能帮助我弄明白如何让文字停止摆动，我会非常感激：hover。

谢谢！

CSS3变换垂直对齐文本故障

0 个答案: