CSS arrow: Как я могу центрировать текст?

Пожалуйста, посмотрите на http://jsfiddle.net/yusaku/NqLuX/1/CSS arrow: Как я могу центрировать текст?

Я мог бы отобразить стрелку, используя только CSS, но я никогда не мог центрировать текст (в этом примере, «ABC») в TD. Выполнение «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; 
}

источник

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

Здесь вы идете: http://jsfiddle.net/2uTEs/

Я удалил все ненужные элементы, оставив только необходимое.

источник

2012-02-12 15:21:51 skimberk1

Минимальные изменения

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

источник

2012-02-12 15:22:09 bumbu

CSS arrow: Как я могу центрировать текст?

ответ

Смежные вопросы