CSS arrow:如何将文本居中?

时间:2012-02-12 15:10:37

标签: html css

请查看http://jsfiddle.net/yusaku/NqLuX/1/

我只能使用CSS显示箭头,但我永远不会在TD中居中文本(在本例中为“abc”)。做“text-align:center”似乎无法使用..有人能建议我吗? (没关系,位置不是完全中心)

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

3 个答案:

答案 0 :(得分:6)

在这里:http://jsfiddle.net/2uTEs/

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

答案 1 :(得分:2)

答案 2 :(得分:1)

脏的方法:添加正确的填充

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

这显然会因不同长度的文本而有所不同。