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;
}

方向：rtl with text-align：center不起作用

2 个答案: