CSS箭頭：如何將文本居中？

請看看http://jsfiddle.net/yusaku/NqLuX/1/CSS箭頭：如何將文本居中？

我可以通過僅使用CSS來顯示箭頭，但我永遠不能在TD中居中放置文本（在本例中爲「abc」）。做「文本對齊：中心」似乎不可用..有人可以建議我嗎？（這是確定的，位置不完全中心）

<html> 
<body> 
<table> 
<tr> 
    <td class="arrow_td"> 
     <span class="name">abc</span> 
     <div class="arrow"></div> 
    </td> 
</tr> 
</table> 
</body> 
</html> 


td.arrow_td { 
    width: 200px; 
    text-align: right; 
    background-color: black; 
    color: white; 
    white-space: nowrap; 
} 
td span.name { 
    display: inline-block; 
    vertical-align: middle; 
} 
td div.arrow { 
    display: inline-block; 
    vertical-align: middle; 
    width: 0; 
    line-height: 0%; 
    border: none; 
    border-left: 20px solid black; 
    border-bottom: 20px solid white; 
    border-top: 20px solid white; 
    border-image: initial; 
}

來源

2012-02-12 zono

骯髒的方式做到這一點：加右填充

td span.name { 
display: inline-block; 
vertical-align: middle; 
padding-right: 70px; 
}

這顯然將與文本的長度不同的工作方式不同。

來源

2012-02-12 15:18:34 supertopi

謝謝！那麼，正如你所說，我可以通過JavaScript計算長度.. – zono 2012-02-12 15:26:40

在這裏你去：http://jsfiddle.net/2uTEs/

我刪除了所有不必要的元素，只留下的必需品。

來源

2012-02-12 15:21:51 skimberk1

變化最小

http://jsfiddle.net/NqLuX/28/

來源

2012-02-12 15:22:09 bumbu

CSS箭頭：如何將文本居中？

回答

相關問題