Question

当高度设置为vertical-align时，我是否可以border-top文字显示在border-bottom上方，就像height: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下方对齐。 马铃薯确实在li 上方对齐，但 border-top跟在（？）之后。

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

http://jsfiddle.net/jLYhg/

Answer 1

奇怪的祝福呃;）为了做到这一点，实际上元素的边界呈现在元素之外，所以没有直接的方法这样做，但仍然如果你想让文本垂直居中在边框上，而不是你需要的改变你的标记和CSS中的一些东西。

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

Demo

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

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

另外请确保在下面的ID中使用position: relative;，否则它们会在野外流出。

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

如何：当高度为：0px时，溢出边框顶部的文字，如边框底部

1 个答案: