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; 
}

答

肮脏的方式做到这一点：加右填充

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

这显然将与文本的长度不同的工作方式不同。

谢谢！那么，正如你所说，我可以通过JavaScript计算长度.. – zono 2012-02-12 15:26:40

答

在这里你去：http://jsfiddle.net/2uTEs/

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

答

变化最小

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

CSS箭头：如何将文本居中？

相关推荐