floatで横並びした文字・画像を中央寄せしたい
floatプロパティは、カンタンに文字や画像を左寄せ・右寄せでき、その性質を応用して横並びにすることが可能です。
ですが、floatプロパティで横並びにした画像やテキストそれぞれの要素を中央揃えしたいということはないでしょうか？
ただ単純にfloatプロパティで横並びにしただけであれば幅が自動調整されるため中央揃えされているように見えるでしょう。
別途CSSを適用していない限りデフォルトでは各要素のコンテンツが左揃えになっているはずです。
横並びにした各要素をブロック単位で中央揃えしたい時があるでしょう。
そうではなく、横並びにした要素全体をかたまりとして中央揃えしたい時もあるでしょう。
それぞれやり方が異なるので詳しく解説していきます。
floatで横並びした文字・画像を中央寄せする方法
先ほど紹介したように、
- 各要素ごとに中央揃えしたい場合
- 横並びにした要素全体を中央揃えしたい場合
それぞれやり方が異なるほか、floatプロパティの特性上少し複雑ですので、別々に解説していきます。
各要素ごとに中央揃えしたい場合
この場合は特に難しいことはありません。通常の中央揃えでも使われることが多いtext-alignプロパティにcenterを与えるだけでセンタリングできます。
なお、text-alignプロパティは画像に対しても有効です。テキストだけでなく要素内全てのコンテンツの並びを調整できるので、中央揃え・右揃えをする際の必須テクニックです。
ただし、text-alignプロパティで中央揃えする際は、widthプロパティで明示的に幅を与えるようにしてください。
通常のブロック要素では幅100%がデフォルトなので、text-alignにより中央揃えすることができますが、floatプロパティで横並びにした場合は幅の設定が消失するため、CSSにて明示的に指定する必要があります。
.sample{
width:100px;/* 幅を指定すること */
}
指定しないと上記サンプルのようにtext-alignプロパティが意味を成さないので注意しましょう。
横並びにした要素全体を中央揃えしたい場合
floatプロパティを使って横並び持つ要素全体を中央揃えするのはかなり難しいです。
通常のブロック要素であれば「margin:auto」や「text-align:center」で中央揃え問題が解決します。ですが今回はfloatプロパティを使っている関係で要素の並びが特殊な状態になっており、marginプロパティやtext-alignプロパティを使った中央揃えができません。
中央揃えしたい場合は、floatプロパティに加えてpositionプロパティとleftプロパティを使用します。
これらプロパティを使うことでfloatプロパティで横並びにした要素をまとめて中央に寄せることが可能です。
.wrap ul li {
position: relative;
left: -50%;
float: left;
width:80px;
text-align:center;
list-style: none;
}
各要素にwidthプロパティで幅を与えてtext-align:centerを与えれば、横並びになった要素が中央に集まり、各要素のコンテンツが中央揃えされているという状態にすることができます。
このように中央揃えする際、横並びにしたい要素の親要素にもfloatプロパティを与えている点を覚えておいてください。親要素もfloatプロパティを与えないと画面端にコンテンツが見切れてデザインが狂ってしまうので注意しましょう。
.sample{
clear:both;
}
floatプロパティを使った後の「clear:both」も忘れないようにしましょう。
floatプロパティは癖の強いプロパティであり、上手に使いこなすのは少し難しいですが、使いこなせるととても便利ですので、自分でコードを組んでプレビューしながら使い勝手を試すと良いでしょう。