Обтекание центрированного текста во вкладках

Question

Я ищу примеры css-вкладок с переносом текста, причем текст центрируется как по вертикали, так и по горизонтали.Примерно так:

• |Это ||
• |очень долго |Краткое название |
• |название вкладки ||

Я хотел бы знать, можно ли это сделать с помощью простой иерархии узлов ul-li-a или мне нужно включить дополнительные слои (например, div или span).Мне нужно кросс-браузерное решение (IE 7+, Firefox, Chrome, Safari).

Answer 1

Стилизация вкладок - задача не из легких.Для моих конкретных нужд я обнаружил, что использование display: table для элемента ul и display: table-cell для элементов li дает удовлетворительный результат (хотя не поддерживается старыми браузерами).

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>

С помощью этой простой наценки я смог добиться вертикальных и горизонтальных центрированных вкладок.