- ベストアンサー
レスポンシブルWebデザインのボックスの中の文字
宜しくお願いします。 2行目に記したボックスを均等に配置したレイアウトで、ブラウザを縮めると1行目の ように文字が上下中央に揃う形にコーディングしたいのです。 どのようにすれば実現出来ますか？ 出来ればHTML5 CSS3で実現したいですがJavaScriptやJqueryを用いた方法でも構いません。 下記に参考ソースを記します。 http://jsfiddle.net/2VfDu/11/
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- think49
- ベストアンサー率59% (285/482)
#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/ やはり、実現することは難しいでしょうか？
- think49
- ベストアンサー率59% (285/482)
#2 です。 > 示して下さったサンプルはアンカーのボックスが変化してしまうのと文字が上下中央に来ておりません。 申し訳ありませんが、仰る意味が分かりません。 「アンカーのボックスが変化してしまう」とはどういう意味でしょう？ 私の環境(Google Chrome 38)では上下中央に表示できています。 自動改行による折り返しを考慮されているのでしょうか？ 100%再現する条件を示していただけると助かるのですが…。 # Re: newly777さん
補足
> 示して下さったサンプルはアンカーのボックスが変化してしまうのと文字が上下中央に来ておりません。 申し訳ありませんが、仰る意味が分かりません。 ブラウザの表示を縮めるとグレーで囲っている部分の枠の高さが変化するということです。 また、文字も合わせて上下中央に来ておりません。一段目のボックスをご確認願います。 ブラウザでの表示を縮めてもグレーのアンカーは変化しないのと表示される文字が上下中央に揃っております。
- think49
- ベストアンサー率59% (285/482)
高さの加減がよくわかりませんが、こういう事でしょうか。 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段目のボックスの変化）ことを実現したのです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
お礼
ご親切に教えて下さり、どうもありがとうございました。display: flex を確認してみます。