炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

CSS - クロスブラウザ（IE6、IE7、IE8、Firefox、Chrome）に対応したセンタリング方法

制作技術

●対象ブラウザ

IE6、IE7、IE8、Firefox、Chrome

意外とはまってしまうテキストやコンテンツのセンタリング方法。 ブラウザの仕様にとらわれないCSSの書き方を紹介します。

[html]<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>クロスブラウザ - センタリング</title> </head> <div style="text-align:center; border:1px solid red;"> <div style="width:25%; margin-left:auto; margin-right:auto; text-align:justify; border:1px solid black;"> ブロックレベル要素 </div> </div> </html>[/html]

ブロックレベル要素

①text-align:center; text-alignは、本来インライン要素の位置揃えを指定するためのものなので、tableやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。が、しかし！Windows版のIEのバグ対応で記述が必要となります。

②margin-left:auto; margin-right:auto; IE以外センタリング

③text-align:justify; IE対応の為、親に指定した text-align:center; が影響して、子のテキストまでセンタリングされてしまいます。 この問題を解決するのには、子要素に text-align:left; を指定してあげます。 さらに、 text-align:left; ではなく、 text-align:justify; を指定することで、この値は「両揃え」となっている為、左から右へと記述する言語も右から左へと記述する言語でも関係なく配置できる為、 text-align:justify; で記述しましょう。