資料一覧へ

ブロックの中央揃え・右揃え−行頭位置を揃えて配置

「余白を数値で指定」へ

ここでは、下の例のように行頭位置を左に揃えた上で、ブラウザの中央に行を配置する方法について説明します。
このように配置させるcssとhtmlの記述例はこのページの下にあるので参照してください。

また行頭位置を左に揃えた上で、ブラウザの右に行を配置することもできます。
このように配置させるcssとhtmlの記述例はこのページの下にあるので参照してください。

左右の余白を数値で指定すると

別ページで説明したmargin-left、margin-rightを利用して

1. ブロック左右の余白には同じ数値（ピクセル数は大目に）
2. ブロック内の文字は左揃え(初期設定なので特に指定の必要はなし)

を指定すると、ブロックは中央に配置されます。

ただしこの方法ではブロックの横幅＝ブラウザの幅−左右余白になるので、閲覧側がみているブラウザの幅によっては

• ブロックが狭くなりすぎる
• ブロックの幅が広くなりすぎて中央に行が配置されているように見えない

言いかえると、意図しているレイアウトとはずれが出てくる可能性があります。
下のブロックには背景色をつけています。ブラウザの幅を変えてブロックと各行の見え方の変化を確認してみてください。

ブロック左右の余白を同じ値に指定
→ブロックがブラウザの中央に配置されています。
このブロックで指定しているcssは以下の通りです。
p { margin-left: 200px; margin-right: 200px; background-color: yellow; }
宣言内容は左から右余白(200ピクセル)、左余白(200ピクセル)、背景色（黄）になっています。

文字を中央揃えにすると

行の位置をブラウザの中央に寄せるには、普通中央揃えを利用します。
この場合はブロックの幅（この場合はブロック内で一番長い行）よりブラウザが狭くならない限りブロック幅が狭くなる＝改行が増えることはありませんが、
htmlのオプション「align="center"」を利用した場合と同様、cssのテキスト中央揃え「text-align; center;」を指定した場合にもブロック内の各行がそれぞれ中央揃えになるため、行頭位置がバラバラになってしまいます。

• 箇条書き(ul)に左右余白50ピクセルと
• text-align; center;での文字の中央揃え
• および背景色の指定をしています
• 行頭文字の
• 位置で
• 分かる様に
• 各行が中央揃えになるため
• 行頭がずれています

なお、上の例のcssでは以下のように文字の中央ぞろえのみを指定し、余白は指定していません。

ul { text-align: center;  }

レイアウトを崩さず中央に配置するには

上記の問題を解決するにはブロックに以下の点を指定します。

• 余白指定でレイアウトが崩れる→ブロック幅を指定し、ブラウザの幅で変わらないようにする
• 文字の中央揃えで行頭位置がずれる→ブロックを中央配置にし、ブロック内の文字は左揃えにする

ブロック内の文字は左揃えが初期設定なので特に指定する必要はなく、ブロック幅とブロックの中央配置にするためのCSSを指定します。

ブロック幅を指定  width: 250px;

ブロックの横幅のピクセル数(例では250ピクセル)を指定

ブロックの中央揃えを指定  margin-left: auto; margin-right: auto;

左及び右の余白をブラウザの幅に応じて自動調整(auto)する

InternetExplorerで表示させる場合の問題点

cssの仕様としては上の記述例で充分なのですが、InternetExplorerのバージョンによっては、このcssを記述してもブロックが中央揃えになりません。
（特定のInternetExplorerのバージョン独自仕様のため、余白の自動調整がうまく効かない）
このためどのInternetExplorerでもブロックを中央に配置させるには、
↓のように内容を左揃えに指定したブロックを、内容を中央揃えにするブロックの中に入れる必要があります。

1. 本来のtext-align:center;は内部のブロック（子要素）を中央揃えにしても、子要素に含まれている内容までは中央揃えにしないのですが、InternetExplorerでは子要素の内容まで中央揃えにしてしまいます。そこで、子要素を左揃えにするために、子要素の方にはtext-align:left;を指定する必要があります。
2. 余白のauto指定、あるいはtext-alignのいずれを利用するにしても、中央に寄せたいブロックに幅（width）が指定されていないとレイアウトが崩れたり、中央への配置自体が上手くいかない場合もあります。中央配置するブロックには必ずwidthを指定してください。

ということで、本来必要なcssと、一部のInternetExplorerでもブロックを中央に寄せるために必要なcssを追加すると、↓のようになります。

#c1が外側のブロックで内容の中央揃えを指定（IE独自仕様に対応）、
#c2は内側のブロックで左から順に内容の左揃え（IE独自仕様に対応）、左余白自動調整、右余白自動調整、ブロックの幅を250ピクセルに指定となっています。

これを利用して箇条書きのブロックを中央揃えにする場合、htmlの記述は以下の様になります。実際の見え方はこのページの一番上の枠線内を参照してください。

<div id="c1">
<ul id="c2">
<li>閲覧側のブラウザ幅に関わらず
<li>行頭位置を
<li>揃えて
<li>ブラウザ中央に
<li>内容を表示する。
</ul>
</div>

左揃えのブロックを右に配置するには

基本的な指定方法はブロックの中央揃えと同じですが、marginの指定が
margin-left: auto; margin-right: 0px;
というように、右余白をautoでなく0px（余白なし）に変更します。

また、InternetExplorerに対応させるために外側を囲むブロックには
text-align:right;
というように、内容の右揃えにするCSSを指定します。

ということで、本来必要なcssと、InternetExplorerでブロックを右に寄せるために必要なcssを追加すると、↓のようになります。

#r1が外側のブロックで内容の右揃えを指定（IE独自仕様に対応）、
#r2は内側のブロックで左から順に内容の左揃え（IE独自仕様に対応）、左余白自動調整、右余白0ピクセル、ブロックの幅を250ピクセルに指定となっています。

これを利用して箇条書きのブロックを右揃えにする場合、htmlの記述は以下の様になります。実際の見え方はこのページ上にある右寄せ例を参照してください。

<div id="r1">
<ul id="r2">
<li>閲覧側のブラウザ幅に関わらず
<li>行頭位置を
<li>揃えて
<li>ブラウザ中央に
<li>内容を表示する。
</ul>
</div>