CSSのfloat設定にハマったので記録しておく

Yii2はWebアプリケーションを作るものなので、cssやJavaScriptなどでWeb画面を作っていくのですが、floatとtext-align:centerの組み合わせで躓いたのでメモしておきます。

やりたかったこと

以下のような感じで、ヘッダ部分に、左右にアイテムを置いて、真ん中にタイトルを置くような画面を作りたかった。

書いたコード

floatを使って、アイテムを左右に散らして、タイトル部分をcenterで記載してみました。

<div style="float:left;"> XXXシステム </div>
<div style="text-align:center;"> タイトル </div>
<div style="float:right;"> ログアウト </div>

どうなったか

以下のように、右においたアイテムが、下にずれて表示されてしまいます。

何が悪かったのか

以下のように、align:centerをするタイトル部分は一番下に置かないといけなかった。

<div style="float:left;"> XXXシステム </div>
<div style="float:right;"> ログアウト </div>
<div style="text-align:center;"> タイトル </div>

どうもtext-align:centerを使うと、その行が使い尽くされて、次の行に移るような動作をするようです。
text-align:centerをしない場合には、この3行をどんな順番で記述しても同じ表示になります(当然センタリングはされませんが)。

これ結構長い時間ハマってしまいました。センタリングを別の方法にしてみたりと色々と試行錯誤して、やっと何が起きているのかわかりました。