作法：當高度為0像素時，在邊框上方溢出文字，如邊框下方

Question

無論如何，當高度設置為height:0px;時，我是否可以vertical-align文本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

奇怪的是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;
}