久しぶりの更新になります。
今回は中央配置について書いていきたいと思います。
中央揃えで代表的なのはtext-align:centerとmargin:0 auto;ですね。
私もよくお世話になっています。
この2つについて簡単におさらいしていきましょう。
text-align:center;
テキストや画像などのインライン要素を中央配置にします。
そのままではブロック要素には効かないので、text-alignで使いたいときは
display:inline-block;
を指定します
margin:0 auto;
ブロック要素を中央配置にします。
widthを指定する必要があります。
widthが100%だと中央配置になりません。
margin:50px auto 30px;
のようにすると上に50px、下に30pxのマージンが得られます。
widthを決めずにテキスト量に応じてブロックを中央配置にする場合
先ほども書いたようにmargin:0 auto;だとwidthを指定しないといけません。
また、text-align:center;だと文字が中央寄せになってしまいます。
widthを決めないで中央配置かつ左寄せにしたい場合は
ブロックを親要素で囲い、
親要素にtext-align:center;
中央配置にしたい要素にtext-align:left;,display:inline-block;
をそれぞれ指定します。
親ブロック
中央配置。中央配置。中央配置。中央配置。
親ブロック
中央配置。中央配置。中央配置。中央配置。中央配置。中央配置。中央配置。
中央配置。中央配置。中央配置。中央配置。中央配置。中央配置。中央配置。中央配置。
これらは両方とも以下の同じcssで中央ぞろえにしています。
.wrap {
text-align:center;
}
.inner {
text-align:left;
display:inline-block;
}
中央配置にできない
さて、本題です。
最近、いくらやっても中央揃えにならない時がありました。
そのときはmargin:0 auto;で中央配置にしていたのですが、ウンともすんともいいませんでした。
もちろんwidthは指定していました。
かれこれ20分くらい色々試してもダメでちょっとふてくされていたんですけど、
ふと気づいたんです。
こいつ、float:left;になっている・・・
bootstrapを使っていて、そのグリッドシステムでクラスにfloat:left;がついていました。
自分でつけたわけじゃなかったので、見つけるまでに無駄に時間がかかってしまいました。
float:none;を設定したら無事中央配置ができました。
皆さんももし中央配置が効かない場合はfloatが指定されていないか確認してみてください。
ということで今回はここまでです！
