レスポンシブルWebデザインのボックスの中の文字

質問

宜しくお願いします。

2行目に記したボックスを均等に配置したレイアウトで、ブラウザを縮めると1行目の
ように文字が上下中央に揃う形にコーディングしたいのです。

どのようにすれば実現出来ますか？

出来ればHTML5 CSS3で実現したいですがJavaScriptやJqueryを用いた方法でも構いません。

下記に参考ソースを記します。

http://jsfiddle.net/2VfDu/11/

回答No.5

think49 · ベストアンサー

#2,3,4 です。
#4 の補足を読みました。

.list2 ではなく、.list を書き換える形で実現してみましたが、いかがでしょうか。
http://jsfiddle.net/2VfDu/15/

---
もう少し、スマートに実装したい場合は display: flex が妥当だと思いますが、少し疲れたのでその辺りはご自身で調べて見てください。
http://www.flapism.jp/html/278/

# Re: newly777さん

お礼

ご親切に教えて下さり、どうもありがとうございました。display: flex を確認してみます。

回答No.4

think49

#2,3 です。
IE11 で試しましたが、1,2段目共に上下中央に来ていることを確認しました。
1,2段目共に「プレスリリース一覧」の高さが他2つと比較して高くなっていました。
Google Chrome 38の場合、一定以上の幅に小さく出来ませんでした。
http://jsfiddle.net/2VfDu/13/

# Re: newly777さん

補足

おはようございます。

こちらの環境ですが、Google Chrome　39.0.2171.65 mです。

また、こちらの説明が悪くてすみませんでした。

画像で恐縮ですがご確認頂ければ幸いです。

http://jsfiddle.net/2VfDu/14/

やはり、実現することは難しいでしょうか？

回答No.3

think49

#2 です。

> 示して下さったサンプルはアンカーのボックスが変化してしまうのと文字が上下中央に来ておりません。
申し訳ありませんが、仰る意味が分かりません。
「アンカーのボックスが変化してしまう」とはどういう意味でしょう？
私の環境(Google Chrome 38)では上下中央に表示できています。
自動改行による折り返しを考慮されているのでしょうか？
100%再現する条件を示していただけると助かるのですが…。

# Re: newly777さん

補足

> 示して下さったサンプルはアンカーのボックスが変化してしまうのと文字が上下中央に来ておりません。
申し訳ありませんが、仰る意味が分かりません。

ブラウザの表示を縮めるとグレーで囲っている部分の枠の高さが変化するということです。

また、文字も合わせて上下中央に来ておりません。一段目のボックスをご確認願います。
ブラウザでの表示を縮めてもグレーのアンカーは変化しないのと表示される文字が上下中央に揃っております。

回答No.2

think49

高さの加減がよくわかりませんが、こういう事でしょうか。
http://jsfiddle.net/2VfDu/12/

width: 33% を使用していますが、初期動作は content-box: content-box なのでborder, margin 分だけ 100% を超過しており、table の自動幅計算に頼って三等分しています。
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing
今回は質問コードを流用するようにしたのでそこは修正していませんが、box-sizing: border-box でも指定して計算法を変更するか、calc() で幅を計算させるのが正式なやり方だと思います。
https://developer.mozilla.org/en-US/docs/Web/CSS/calc

# Re: newly777さん

補足

think49様

早々にご回答頂きましてどうもありがとうございます。

示して下さったサンプルはアンカーのボックスが変化してしまうのと文字が上下中央に来ておりません。

実現したいことはアンカーのボックスは可変せずに表示画面が小さくなったときに上下中央に来る（1段目のボックスの変化）ことを実現したのです。

回答No.1

ORUKA1951

display:table-cell;
vertcal-align:middle;
text-align:center;