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 であることに注意してください。このスパンにはアニメーション効果もあります。ページがロードされると、スパンの値がbottom: -70pxになり(コンテナにはoverlfow: hiddenがあるため、このスパンは表示されません)、(.animateを使用して)表示され、bottom: 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 に答える