2

私は 2 人の子供を持つ水平方向の中央揃えを持っていdivます。それぞれの子は、 と で垂直方向に中央揃えされますdisplay: table-cell。vertical-align:middle

すべてのテキストが 1 行に収まるほど画面 (または親コンテナー) の幅が広い場合、すべてが正常に機能します。ただし、画面/親が縮小すると、テキストが折り返され、大量の空白が残ります。テキストに合わせて div が縮小されないのはなぜですか?

下の画像は問題を示しています。すべてが上の画像で私が望む方法です。灰色のセクションはコンテンツをラップし、親コンテナー内の中央に配置されます。ただし、親が縮小してテキストが折り返されると、大量の空白が残ります (赤い長方形で強調表示された領域を参照)。この空白により、要素全体が中央ではなく左に配置されているような錯覚が生じます。

これまでの jsFiddle の例は次のとおりです: http://jsfiddle.net/eterpstra/pRgeL/1/

左にシフトするのではなく、すべてがより中央に表示されるように、この空白を取り除く方法はありますか?

ここに画像の説明を入力

4

2 に答える 2

1

ブラウザーは、.header (CSS で設定) の幅の 100% になるまで、その灰色の部分 (.header-wrap) の幅を増やしているようです。.header-wrap のテキストがまだ長すぎる場合は折り返されますが、.header-wrap の幅は収まるように縮小されるのではなく、全幅のままになります。それは理にかなっていると思います。

あなたの最善の策は、使用することtext-align: center;であり、余分な空白について心配する必要はありません。まさにこの状況であなたにできることは何もないと思います。

于 2013-10-02T19:43:27.660 に答える