0

水平に言えば、中央に揃えたいdivがあります。button内側は中央に揃えることができることに注意してください...悲しいことに、ラッパーに同じものを作ることはできません

ライブデモはこちら

HTMLマークアップ:

<div class="wrap">
    <div class="grayContainer">
        <div class="editor-label">
            name:
        </div>
        <div class="editor-field">
            james
        </div>
        <div class="editor-label">
            last name:
        </div>
        <div class="editor-field">
            bond
        </div>
        <div class="alignCenter">
            <input type="submit" value="press me" class="" />
        </div>
    </div>
</div>

CSSマークアップ:

.grayContainer {
    padding: 15px 10px 10px 10px;
    width: 450px;
    background-color: #E7E7E7;
    border: 2px solid #CCCCCC;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    box-shadow: 0px 0px 6px 2px #CCCCCC;
    position:relative;
    behavior: url(/PIE.htc);
}

.grayContainer label
{
    float: left;
    width: 200px;
    text-align: right;
    color: #656565;
    /*font-size: 12px;*/
    text-shadow: 0 1px 0 white;
    padding: 8px 13px 10px 0;
}

.grayContainer .alignCenter
{
    padding: 20px 0;
}

.alignCenter
{
    text-align: center;
}

.wrap
{
     margin: 0 auto;   
}

前もって感謝します

4

4 に答える 4

2

左右の余白を に設定しautoます。

margin-left: auto;
margin-right: auto

またはさらに良い

margin: 0 auto;

これを参照してください。

于 2012-06-02T20:55:56.627 に答える
1

幅も設定する必要がある場合があります。.wrap追加するか、設定する必要がありmargin: 0 auto;ます.grayContainer

于 2012-06-02T20:58:42.383 に答える
1

ラッパーを中央に配置しましたが、その幅が使用可能な幅を埋めるため、中央に配置されていることがわかりません。

代わりに、コンテナーをラッパー内の中央に配置したいと思います。

http://jsfiddle.net/dS9Bc/4/

于 2012-06-02T20:58:47.140 に答える
0

margin right & left auto を作成し、このスタイルを CSS に追加するだけで、jsFiddle では機能しません。

.wrap{
margin:0 auto;
}
于 2012-06-02T20:53:28.103 に答える