0

一見単純な問題ですが、私が見つけた他の解決策はここではうまくいきませんでした。

'.grid-wrapper-inner'を'.grid-wrapper'内の中央に配置しようとしています

.grid-wrapper {
    background:grey;
    display:block;
    margin:0 auto;
    width:90%;
    padding:80px 0;
    text-align:center;
    }

.grid-wrapper-inner {
    background:yellow;
    display:inline-block;
    margin:0 auto;
    text-align:left;
    }

'display：inline-block'（親に'text-align：center'を使用）がこれを達成すると思いましたが、レンガの壁にぶつかりました

ここで最もよく説明されています：

http://jsfiddle.net/YrF9C/1

基本的に、grid-wrapper-innerが親divの100％を占めるのを防ぎ、中央に配置できるようにする必要があります。

インラインブロックを使用して緑色のボックス（リンクを参照）を中央に配置しましたが、下部の孤立したボックスが中央に配置されました。これは望ましい効果ではありません。

助けてくれてありがとう！

4

5 に答える 5

0

margin：autoを使用して水平方向に中央揃えできますが、中央揃えしようとしている内側のdivを機能させるには、何らかの幅を指定する必要があります。それ以外の場合は、単に伸び、自動マージンは0です。技術的にはこれも中央に配置されますが、必要なものではありません。

たとえば、幅を.grid-wrapper-innerに86％追加してみてください。

または、幅を設定したくない場合は、左右で同じ実際のマージンを設定する必要があります。たとえば、margin：0autoを変更します。.grid-wrapper-innerからmargin：5％またはmargin：50px。

于 2013-02-15T15:14:04.557 に答える
0

padding:80px 0;に変更する代わりにpadding:80px;。上下のみにパディングを設定していますが、左右は 0 であるため、内側の div はラッパー div の左右の境界線まで拡大されます。垂直方向と水平方向の両方でまだ中央に配置されているだけで、左右のパディングは 0 です。

于 2013-02-15T15:22:22.460 に答える
0

width を.grid-wrapper-innerに設定すると問題は解決しますが、どうやらそれができないか、したくないようです。それでも、画面サイズに合わせてレイアウトを調整したい場合は、CSS メディア クエリの使用を検討してみてはいかがでしょうか。

于 2013-02-15T16:01:39.223 に答える
0

.次の 2 つのいずれかを行うことができます。

内側のラッパーに幅を追加します

.grid-wrapper-inner {
background:yellow;
display:inline-block;
margin:0 auto;
width:80%;
text-align:left;
}

または、パディングを .grid-wrapper に追加できます

于 2013-02-15T15:13:25.923 に答える
0

に設定widthする必要があり.grid-wrapper-innerます。90% に設定してみてください。違いに気付くでしょう。

于 2013-02-15T15:07:24.577 に答える