跨度中文本的垂直對齊 - 跨度之外的文本

我需要跨度使文本在中心對齊。此前我已經使用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

跨度中文本的垂直對齊 - 跨度之外的文本

回答

相關問題