質問: ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0c5b8aeba1e2a0fb013ec041bf6ac30b.png) ``` テキスト1 テキスト2 テキスト1 テキスト2 テキスト1 テキスト2 ``` ``` ul { height: 55px; } li { float: left; display: table-cell; vertical-align: middle; } ``` 質問をご覧頂きありがとうございます。 画像の様に作りたいたのですが、 上記のコードで試したのですがうまくいきません。 の中の複数のが入ったを縦中央揃えするやり方を教えて下さい。 初歩的な質問かもしれませんがどうかよろしくお願い致します。
回答: 図に似せてコーディングしてみました。こんな感じでしょうか。 ``` * { /*以下はリセットなので無くてもよい*/ margin: 0; padding: 0; vertical-align: bottom; } ul { height: 55px; /*あとに続く子要素liをセルとして動かす為table指定が必要*/ display: table; } li { /*擬似テーブルで回り込みは必要ない*/ display: table-cell; vertical-align: middle; /*擬似テーブルもマージンは効かない*/ padding: 0 20px 0 0; } p { text-align: center; } ``` コーディングテストサイト:http://codepen.io/