在选项卡中包含居中文本

Question

我正在寻找带有包装文本的css标签的示例，并且文本在垂直和水平方向都居中。像这样：

• |这是| |
• |很长的|简称|
• |标签标题| |

我想知道是否可以使用简单的ul-li-a节点层次结构或者如果我需要包含其他层（例如div或span）。我需要一个跨浏览器的解决方案（IE 7 +，Firefox，Chrome，Safari）。

Answer 1

样式选项卡不是一件容易的事。根据我的具体需要，我发现在ul元素上使用display：table并在li元素上显示：table-cell给出了令人满意的结果（虽然老浏览器不支持）。

Answer 2

这是桌子最适合您的目的之一。这是标记。

<table class="titles">
    <tbody>
        <tr>
            <td>This is a long title.</td>
            <td>Short.</td>
            <td>This is an annoyingly long title.</td>
        </tr>
    </tbody>
</table>

这是CSS。

<style type="text/css">
  .titles {
    margin: auto;
  }
  .titles td {
    width: 50px;
    text-align: center;
  }
</style>

通过这种简单的标记，我能够实现垂直和水平居中的标签。