2

何度かこの問題が発生します。margin：0autoを使用して何かを中央に配置しようとするたびに。成功することもあれば、失敗することもあります。だから私の質問はです。

  1. 以下の例の#PostWrapperがinnerWrapperの中央に配置されていない理由。
  2. margin：0が自動で機能する場合と機能しない場合があります。原因は何ですか。

CSS：

#container #Post{

    background:#FFFFFF;
    border-radius:10px;
    margin-top:20px;
    overflow:auto;
}

#container #Post #InnerWrapper{
        margin:10px;
}

#container #Post #InnerWrapper #SubjectWrapper{
    overflow:auto;
}

#container #Post #InnerWrapper #SubjectWrapper #SubjectText{
    font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style:italic;
    font-weight:bold;
    float:left;
}

#container #Post #InnerWrapper #SubjectWrapper #SubjectBox{
        float:left;
        margin-left:2px;
}

#container #Post #InnerWrapper #PostWrapper{
     margin:0 auto;
     border:3px solid #000;
     display:inline-block;
}

#container #Post #InnerWrapper #PostWrapper #PostText{
     font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
     font-style:italic;
     font-weight:bold;
}

#container #Post #InnerWrapper #PostWrapper #PostBox{
}

HTML：

    <div id="Post">
     <div id="InnerWrapper">
    <div id="SubjectWrapper">
           <div id="SubjectText">Subject:</div>
               <div id="SubjectBox"><input type="text" class="text_box" /></div>
           </div>

        <div id="PostWrapper">
           <div id="PostText"><?php if($PageType=='and'){ echo 'Add new Deal:';}else{ echo 'Edit Company History:';}?></div>

           <div id="PostBox"><textarea rows="20" cols="103" id="PostEditor" /></div>
       </div>
    </div>

4

5 に答える 5

1

私が収集したものから、親コンテナdivに幅を設定することをお勧めします。幅が設定されていない場合、divのデフォルトは100％になるためです。明らかに、画面の100％を占めるdivを「中央揃え」にすることはできないので、それを試してみてください。

于 2012-04-28T15:52:47.643 に答える
1

positionつまり、要素の属性widthに依存します。それらにdisplay入れてみて、幅も設定してください。position: relative;

子divは常に100％の幅を持っているため、センタリングは役に立たないため、幅と位置を定義するとそれが利用されます。また、は使用できませんdisplay: inline-blockが、display: block。

編集

http://jsfiddle.net/vnAvk/を使用したdivのコードサンプルは次のmargin: autoとおりです。

そして、ここに内部要素も中心にあります（私はそれがあなたが求めているものだと思います）：http：//jsfiddle.net/vnAvk/1/

そして、ここにすべてが集中しています：http: //jsfiddle.net/vnAvk/2/

于 2012-04-28T15:16:44.593 に答える
1

2つの理由：その上のフローティング要素をクリアする必要があり、display：inline-block;に設定されています。フロートをクリアしてインラインブロックを削除すると、中央に整列します。あなたはここでそれをチェックすることができます：http：//jsfiddle.net/jalbertbowdenii/pQhjJ/1/

于 2012-04-28T15:38:22.677 に答える
1

The problem is ambiguous selector, the selector chain you provided is invalid. Just use

#PostWrapper{
     margin:0 auto;
     border:3px solid #000;
     display:inline-block;
}

Demo

于 2012-04-28T15:44:32.257 に答える
-2

これを使って：

margin-left:auto;
margin-right:auto;

そして、それでも機能しない場合は、これを追加してください。

text-align:center;

更新1：まあ、クロム開発者ツールであなたのスタイリングをチェックしている間、私はブラウザがあなたのスタイルの参照を認識していないのを見たので、おそらく問題はあなたのアイテムの選択にあります

更新2：これを試してください-

 #container, #Post{

    background:#FFFFFF;
    border-radius:10px;
    margin-top:20px;
    overflow:auto;
}

#container, #Post, #InnerWrapper{
        margin:10px;
}

#container, #Post, #InnerWrapper, #SubjectWrapper{
    overflow:auto;
}

#container, #Post, #InnerWrapper, #SubjectWrapper, #SubjectText{
    font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style:italic;
    font-weight:bold;
    float:left;
}

#container, #Post, #InnerWrapper, #SubjectWrapper, #SubjectBox{
        float:left;
        margin-left:2px;
}

#container, #Post, #InnerWrapper, #PostWrapper{
     margin-left:auto;
     margin-right:auto;
     border:3px solid #000;
     display:inline-block;
}

#container, #Post, #InnerWrapper, #PostWrapper, #PostText{
     font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
     font-style:italic;
     font-weight:bold;
}
于 2012-04-28T15:14:39.863 に答える