0

とにかく、高さが に設定されているときに下に表示できるようにvertical-align、上にテキストを表示できますか?border-topborder-bottomheight:0px;

HTML:

<ul id="experiment" style="background: #FFDD00;">
    <li id="test1"><span class="v-align-bot">Chocolate</span></li>
    <li id="test2"><span class="v-align-top">Potato</span></li>
</ul>

CSS:

#test1 {
    height: 0px;
    border-bottom: 50px solid #648291; /*grey*/
}
#test2 {
    height: 0px;
    border-top: 50px solid #FA8723; /*orange*/
}

.v-align-bot {
    vertical-align: -50px;
}

.v-align-top {
    vertical-align: 50px;    
}

チョコレートはの下に簡単に配置されますborder-bottom。Potatoはの上に整列しますが、li それにborder-top続く (?) ものも同様です。

TL;DR:BUTTONこの下のフィドルの s を適切に整列させる方法はありますか?

http://jsfiddle.net/jLYhg/

4

1 に答える 1

1

奇妙な願いです;)これを行うには、実際には要素の境界線が要素の外側にレンダリングされるため、これを行う簡単な方法はありませんが、テキストを境界線の中央に垂直に配置したい場合は、カップルを変更する必要がありますCSS だけでなく、マークアップ内のものの。

まず、spanCSS で以下のルールを使用するよりも、単純なタグを使用して単語をラップします

デモ

.v-align-bot span {
    position: absolute;
    top: 15px;
}

.v-align-top span {
    position: absolute;
    top: -35px;
}

またposition: relative;、以下の ID で使用していることを確認してください。

#test1 {
    height: 0px;
    border-bottom: 50px solid #648291; /*grey*/
    position: relative;
}
#test2 {
    height: 0px;
    border-top: 50px solid #FA8723; /*orange*/
    position: relative;
}
于 2013-07-27T04:50:58.230 に答える