div内で画像とテキストを水平方向と垂直方向に整列する

Question

この質問は、インターネットのいたるところに浸透していますが、どこに行くにしても、私はそれを実装しようとすると失敗します。

最初にコード。 私はこれで1時間以上を費やして、私が望んでいたイメージを整列できませんでした。 基本的に、最初の行は、画像を左揃えにし、横にテキストを縦に中央揃えにします。 次の '行'、画像は右揃えで、横にテキストが縦に中央に表示されます。

Here's the jsfiddle

私はそれを望んでどのようにそれを得るために、この使用してテーブルの上に5分を過ごしました。

table jsfiddle

あなたは、あなたが私の本ではスーパースターです、二つが同じに見えるようにする方法を見つけ出すことができます。あなたはそれを解決することができれば、誰かがなぜ私は教えてくださいそれはとても面白いので、CSSの今日の世界のテキストを整列させるか、または方向づけるのは難しいですか？なぜdivをテーブルに使うのですか？私は、コーディング標準が長年にわたってより複雑になってきたように感じています。

暴言のため申し訳ありませんが、私はおそらく他の人を助けるためにこれを投稿するには時間がかかった、とup..yetを与えるわけではないので、私はいくつかの蒸気を吹き飛ばす必要がありました:)

Answer 1

あなたは柔軟な構造をしたい、あなたはdivを使用する必要があります。テーブルは固定されているためです。例：下のセルは、上のセルと同じ幅を持つ必要があります。彼らはお互いに異なることはできません。表のセルは一緒にリンクされています。それらを分離することはできません。だから、非常にシンプルなデザインのためにテーブルを使うべきです。もっと明確にするために、柔軟で複雑で妥当な設計のためにdivを使うべきです。 divを使用する必要がある場合は、divを使用する必要があります）

divを使用して、この方法で行うことができます。

http://jsfiddle.net/5aGZj/1/