0

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

JSFiddle：http: //jsfiddle.net/4jSdu/

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 元素的值 bottom: 14px。在这个跨度上也有动画效果。当页面加载时 span 的值为 bottom: -70px （容器有溢出：隐藏，所以这个 span 不可见）然后它出现（使用 .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/

4

1 回答 1

0

可能是这样的？

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; }
}

提琴手

不支持 IE7 或更早版本。根据评论支持动画。

于 2013-07-17T07:52:15.890 回答