2

動的テキストを垂直方向に揃えるために、spanタグとdisplay: table-cellプロパティを使用します。プロパティでラップされdivており、本来のように機能します。display: table

しかし問題は、古いバージョンの Firefox では機能しないことです。残念ながら、Firefox 7 以降のサポートが必要です。

実際の html テーブルを使用する以外に、より簡単な解決策はありますか?

4

2 に答える 2

1

display:table-cell垂直方向の配置のすべてではありません。垂直方向の配置は、CSS だけで簡単に実現できます。

次の 3 つが必要です。

  1. 特定の高さ (流体または静的、それは問題ではありません) を含む仕切り。
  2. 高さ 50% の相対的に配置された「パディング」仕切り。
  3. 垂直方向に配置するコンテンツのコンテナー。

ただし、コンテンツ コンテナの正確な高さを知る必要があります。

div#container {
    height:500px;
}

div#paddingDivider {
    height:50%;
}

div#contentContainer {
    margin:0 auto; /* Centrally align the element */
    height:100px; /* Declare the exact height of the element */
    margin-top:-50px; /* Position half of the element inside the padding divider */
}

JSFiddle の例。

于 2013-03-06T08:58:17.250 に答える
0

displayプロパティの MDN リファレンスによると、tableCSS による表示は Firefox バージョン 1 からサポートされています。あなたは大丈夫なはずです！

于 2013-03-06T08:57:40.550 に答える