在选项卡中环绕居中文本

Question

我正在寻找带有环绕文本的 CSS 选项卡的示例，并且文本在垂直和水平方向上都居中。像这样的：

• |这是     | |
• |很长|短标题 |
• |标签标题     | |

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

Answer 1

样式标签不是一件容易的事。对于我的特定需求，我发现在 ul 元素上使用 display:table 并在 li 元素上使用 display: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>

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