html - 方向 : rtl with text-align: center doesn't work

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>默认情况下，s 显示为内联元素(即它们的宽度与其内容一样宽)。

您需要设置 <span>至 display:block , 或者对其父级执行相同操作并移动 text-align:center给家长。

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