跨度中文本的垂直对齐 - 跨度之外的文本

我需要跨度使文本在中心对齐。此前我已经使用line-height来实现此目的，但是在这种情况下，某些项目的文本会更长，并且不再适用。跨度中文本的垂直对齐 - 跨度之外的文本

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

编辑：

我想指出，跨度元素具有价值底部：14px的。这个跨度也是动画效果。当页面加载跨度有价值底部：-70px（容器已overlfow：隐藏，sö这个跨度是看不到），然后它出现（使用.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/

来源

2013-07-17 renathy

所以你不知道，如果文本是1或2行，对不对？是flexbox的一个选项吗？ –

什么是flexbox？ – renathy

这很好，但它确实没有足够的浏览器支持我的客户端。 – renathy

像这样的事情可能？

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或更早版本的支持。动画支持按照评论。

来源

2013-07-17 07:52:15 Alohci

我不需要这样的动画效果。我有我自己的onmouse等使用jquery。我只需要风格跨文本。 – renathy

很酷。你没有解释你的动画技巧。我只是提供了一种可能性。应该很容易让你适应你的jQuery方法。它只是修补'margin-top'而不是'bottom' – Alohci

我不明白你的意思......这里是网站：http://www.sheerdigitaltest.net/janus/ – renathy

跨度中文本的垂直对齐 - 跨度之外的文本

回答

相关问题