[解決済み] div内の要素を縦に並べるにはどうしたらいいですか？

質問

私は div という2つの画像と h1 . これらはすべて、divの中で縦に隣り合って配置される必要があります。

画像のうち1枚は absolute の中に配置されます。 div .

これを一般的なブラウザで動作させるために必要なCSSは何でしょうか？

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

解決方法は？

いやあ、この問題は人気がありますね。の勘違いが元になっているんです。 vertical-align プロパティを使用します。この優れた記事はそれを説明しています。

理解する vertical-align あるいは、quot;How (Not) To Vertically Center Content"。 Gavin Kistnerによるものです。

"CSSでセンタリングする方法" は、さまざまな状況に必要なCSSのセンタリング属性を見つけるのに役立つ素晴らしいウェブツールです。

一言で言えば <サブ ^{(そしてリンク腐敗を防ぐために)} :

• インライン要素 (そして のみ インライン要素) は、そのコンテキスト内で vertical-align: middle . しかし、"コンテキスト "は親コンテナ全体の高さではなく、それらが含まれるテキスト行の高さである。 jsfiddleの例
• ブロック要素については、垂直方向の配置は難しく、特定の状況に強く依存します。
  • もし、内側の要素に 固定高さ を使用すると、その位置を absolute を指定し、その height , margin-top と top の位置に移動します。 jsfiddleの例
  • もし、センタリングされた要素 は1行で構成されています。 と 親の高さが固定されている を設定すれば、コンテナの line-height でその高さを埋めることができます。この方法は私の経験上、かなり汎用性が高いです。 jsfiddleの例
  • ... このような特殊なケースはもっとあります。