0

无论如何，当高度设置为时，我是否可以将vertical-align文本显示在border-top我可以低于的内容之上？border-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确实在the上方对齐，li 但也border-top跟随（？）它。

TL; DR：无论如何我可以使BUTTON下面这个小提琴中的 s 正确对齐吗？

http://jsfiddle.net/jLYhg/

4

1 回答 1

1

奇怪的希望 eh ;) 这样做，实际上元素的边框呈现在元素之外，所以没有直接的方法，但是如果你想让文本在边框的垂直中间，你需要改变一下标记和 CSS 中的内容。

首先使用一个简单的span标签包装单词，而不是在你的 CSS 中使用以下规则

演示

.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 回答