最近、FirefoxでテーブルセルのCSS「vertical-align:center;」が効かなくなったという現象が報告されています。昨日までは問題なかったのに突然動作しない場合、ブラウザの更新や仕様変更が影響している可能性があります。この記事では原因の解説と具体的な回避方法を紹介します。
vertical-alignの正しい値
まずCSSの仕様上、vertical-alignプロパティに指定できる値は「top」「middle」「bottom」などであり、「center」は正式な値ではありません。以前はFirefoxが独自にcenterをmiddleとして解釈していた可能性があります。
そのため、Firefoxの最新バージョンでは「vertical-align:center;」は無効となり、正しく「vertical-align:middle;」を使用する必要があります。
CSS修正による対処方法
テーブルセル内の中央揃えを行う場合、次のように修正すると安定して表示されます。
td { text-align:center; vertical-align:middle; }
この指定で、横方向はtext-align:center、縦方向はvertical-align:middleで中央揃えが正しく反映されます。
Flexboxを使った代替手段
CSS Flexboxを使うと、より柔軟に縦横中央揃えが可能です。例えば、次のように指定できます。
td { display:flex; justify-content:center; align-items:center; }
これにより、FirefoxだけでなくChromeやSafariなど他のブラウザでも安定して中央揃えが実現できます。
実例：修正前と修正後の比較
修正前: vertical-align:center; → Firefoxで無効
修正後: vertical-align:middle; → 全ブラウザで中央揃えが有効
Flexbox使用時: display:flex; justify-content:center; align-items:center; → より自由度の高い中央配置
まとめ
Firefoxでvertical-alignが効かなくなった場合、まずCSSの値を「middle」に修正することが基本的な対処法です。さらに、Flexboxを活用することで縦横中央揃えを安定させ、ブラウザ間の表示差異を解消できます。
ブラウザ更新や仕様変更によるCSSの挙動の違いを理解し、正しいプロパティを使うことが重要です。
コメント