CSS arrow：如何將文本居中？
[英]CSS arrow : How can I center a text?
問題描述
請看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 個解決方案
解決方案1
6 2012-02-12 15:21:51
你去： http ： //jsfiddle.net/2uTEs/
我刪除了所有不必要的元素，只留下必需品。
解決方案2
2 2012-02-12 15:22:09
解決方案3
1 2012-02-12 15:18:34
骯臟的方法：添加正確的填充
td span.name {
display: inline-block;
vertical-align: middle;
padding-right: 70px;
}
對於不同長度的文本，這顯然會有所不同。
如何在 CSS 中疊加形狀並將文本與其中心對齊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.