CSS 文字と写真を横並びにして中央配置

質問

お店のホームページを作っていて
どうしてもできない箇所があるので質問させて頂きます。
レスポンシブの伸縮するフッターに、左に住所を文字で記載して
右に地図の画像を配置したものを、フッターの中央に配置したいと考えています。

<div style="float:left; margin-right:20px; width:220px;">
東京都.......<BR>
03-.......<BR>
</div>
<div style="float:left; width:220px;">
<img src="../map.jpg" />
</div>

こんな感じで、２つの要素を横並びにはできたのですが
どうしても中央配置にできません。。。
さらに、ブラウザーの横サイズを小さくしていくと
要素が縦並び(上：住所　下：地図)になって中央配置にしたいと考えています。

とても簡単そうなのですが、まる２日間
いろいろ試して、どうしても解決できないので
どなたかアドバイス頂けると幸いです。

よろしくお願いいたします。

回答No.1

tkmojo · ベストアンサー

こういう感じでどうでしょうか。

<div style="display:table;">
<div style="margin-right:20px; width:220px; display:table-cell; vertical-align:middle;">
東京都.......<BR>
03-.......<BR>
</div>
<div style="width:220px; display:table-cell;">
<img src="../map.jpg" />
</div>
</div>

基本的にhtml+cssというのは、テーブルのセル内を除き、縦方向の中央寄せが出来る仕様ではありません。
（特にプレーンテキストがある場合）
無理矢理できなくはない場合も多いですが、結構めんどくさいんですよね。

今回は、display:table-cell;を使って疑似的にテーブルの様な表示方法にさせた上でvertical-align:middle;で縦の中央配置を行いました。
floatは不要なので削除してます。
※display:table-cell;はIE6以下には無効なので注意

> ブラウザーの横サイズを小さくしていくと
> 要素が縦並び(上：住所　下：地図)になって中央配置にしたいと考えています。

これはメディアクエリを使用して、
指定した横幅以下になった場合にdisplay:table-cell;とdisplay:table;をdisplay:block;で打ち消した上で、
width:auto;でも入れてtext-align:center;を指定すればOKでしょう。

また、恐らくは質問しやすいようにタグに直接cssを書いてるんだと思いますが、外部ファイルでやってくださいね。
レスポンシブはインラインスタイルだけでは実現しません。

お礼

回答して頂きましてありがとうございました。
無事、うまく表示することができました！
これから勉強して、CSSが思うように記述できるようになれたらと思います。
ありがとうございました。