html - 方向：带有文本对齐的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

利用display:block

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

Answer 2

啊，我明白你的意思了 - 你的文字<span class="title">没有居中对齐：http: //jsfiddle.net/24e94/1/

这是因为<span>s 默认显示为内联元素（即它们的宽度仅与其内容一样宽）。

您需要将其设置<span>为display:block，或对其父级执行相同操作并移至text-align:center父级。

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