направление: rtl с выравниванием текста: центр не работает

Question

У меня странная проблема, я не понимаю. это мой CSS

.tooltip { 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    -moz-border-radius:5px; 
    border-radius: 5px; 
    border: 2px solid #000; 
    background: #222222; 
    background: #fff; 
    opacity: .9; 
    color: #eeeeee; 
    color: black; 
    padding: 10px; 
    width: 300px; 
    font-size: 12px; 
    z-index: 10; 
} 

.tooltip .title { 
    text-align: center; 
    direction: rtl; 
} 

и это мой HTML:

<span class="tooltip"> 
<span class="title">טקסט בעברית </span> 
</span> 

, но по какой-то причине мой текст направлен RTL, но выравнивается влево от всех мест! Что я делаю неправильно?

Answer 1

Ах, я понимаю, что вы имеете в виду - ваш текст в <span class="title"> не выровнен по центру: http://jsfiddle.net/24e94/1/

Это потому, что <span> показаны в качестве встроенных элементов по умолчанию (то есть они только так широко, как их содержание).

Вам необходимо либо установить это <span> в display:block, либо сделать то же самое со своим родителем и переместить text-align:center на родителя.

• http://jsfiddle.net/24e94/

Answer 2

использование display:block

.tooltip .title { 
    display:block; 
    text-align: center; 
    direction: rtl; 
}