html - CSS 箭头 : How can I center a text?-6ren

html - CSS 箭头 : How can I center a text?

转载作者：搜寻专家更新时间：2023-10-31 22:15:51

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

我可以仅使用 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;
}