タブの中央に配置されたテキストを折り返す

Question

私はテキストを折り返してテキストのCSSタブの例を探しており、テキストは縦と横の両方にセンタリングされています。このようなもの：

• |        これは          |                                   |
• |非常に長い|短いタイトル|
• |      タブタイトル          |                                   |

これは単純なul-li-aノード階層で行うことができますか、追加のレイヤー（divやspanなど）を含める必要があるかどうかをご確認ください。クロスブラウザソリューション（IE 7+、Firefox、Chrome、Safari）が必要です。

Answer 1

タブのスタイル設定は簡単な作業ではありません。私の具体的な必要性については、ul要素のdisplay：tableとli要素のdisplay：table-cellを使用すると満足のいく結果が得られたことが分かりました（古いブラウザではサポートされていません）。

Answer 2

これは、目的に最も適したテーブルの1つです。ここにマークアップがあります。

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

この簡単なマークアップを使用して、縦と横の中央にタブを作成することができました。