Question

我需要在中心对齐文本。以前我为此目的使用了行高，但在这种情况下，某些项目的文本更长，这不再起作用。

HTML：

<ul>
    <li><a><span>Short</span></a>
    </li>
    <li><a><span>Why Should I Monitor?</span></a>
    </li>
</ul>

CSS：

ul {
    position: relative;
    overflow: hidden;
}
span {
    background-color: rgba(216, 25, 11, 0.75);
    display: block;
    height: 70px;
    line-height: 70px;
    width: 135px;
    color: black;
    text-align: center;
    /*margin: auto 0;*/
    font-weight: bold;
    font-size: 15px;
    position: absolute;
    bottom: 14px;
}
li, a {
    width: 135px;
    height: 100px;
    display: inline-block;
}

修改

我想要注意span元素的底部值是：14px。这也是这个范围的动画效果。当页面加载跨度值为bottom：-70px（容器有overlfow：隐藏，没有看到此跨度）然后它出现（使用.animate）并转到底部：14px。所以溶剂应该考虑这个。

我无法在jsfiddle（http://jsfiddle.net/pr5cL/）中使用此动画效果，但它可以在我本地创建的页面上运行。

$("ul li:not(.img_active)").mouseenter(function() {                 
        $(this).find("span").css("bottom","-55px");     
        $(this).find("span").animate({bottom:15},500);
    }).mouseleave(function(){
        $(this).find("span").animate({bottom:-70},500);
    });

这是链接：http://www.sheerdigitaltest.net/janus/

Answer 1

这样的事可能吗？

span {
    display: inline-block;
    line-height:1.25;
    vertical-align:middle;
    width: 135px;
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}

a {
    background-color: rgba(216, 25, 11, 0.75);
    height: 70px;
    line-height: 70px;
    font-size:0;
    overflow:hidden;
}

li, a {
    width: 135px;
    display: inline-block;
    vertical-align:top;
}

span {
  -webkit-animation: slidein 2s ; /* Safari 4+ */
  -moz-animation:    slidein 2s ; /* Fx 5+ */
  -o-animation:      slidein 2s ; /* Opera 12+ */
  animation:         slidein 2s ; /* IE 10+ */
}
@-webkit-keyframes slidein {
  0%   { margin-top: 70px; }
  100% { margin-top: 0; }
}
@-moz-keyframes slidein {
  0%   { margin-top: 70px; }
  100% { margin-top: 0; }
}
@-o-keyframes slidein {
  0%   { margin-top: 70px; }
  100% { margin-top: 0; }
}
@keyframes slidein {
  0%   { margin-top: 70px; }
  100% { margin-top: 0; }
}

Jsfiddle

没有IE7或更早的支持。根据评论动画支持。

span中文本的垂直对齐 - 跨越文本

1 个答案: