0

これが私のhtmlコードです

<section id="usercontent">
        <h1>Section - User Content</h1>
            <article id="notifications">
                <h1>Notifications</h1>
                <p>Why I can't center this? I already use margin:0 auto;</p>
            </article>
        <article>
            <h1>Article - Left Content</h1>
                <section id="menuform">
                    <h1>User Menus</h1>
                </section>
                <section id="shareform">
                    <h1>Shout to the world</h1>
                    <form method="post">
                    <table>
                        <tr>
                            <td>Shout to the world:</td>
                        </tr>
                        <tr>
                            <td><textarea name="user_post" required="required"></textarea></td>
                        </tr>
                        <tr>
                            <td><input id="btn_share" type="submit" value="Share" name="share"></td>
                        </tr>
                    </table>
                    </form>
                    <?php
                    if(isset($_POST['share'])){

                    }
                    ?>
                </section>
        </article>
        <aside>
            <h1>Aside - Right Content</h1>
        </aside>
        <div id="clearfloats"></div>
    </section>

これが私のCSSコードです

/*user content styles*/

/*section styles*/

section#usercontent {
    width:600px;
    background-image:url('../img/content.png');
    font-size:13px;
    color:#323232;
}
section#usercontent h1 {
    visibility:hidden;
    position:absolute;
}

/*clear floats*/

section#usercontent div#clearfloats {
    clear:both;
}

section#usercontent article#notifications {
    width:500px;
    height:20px;
    margin:0 auto;
}

/*article styles*/

section#usercontent article {
    width:220px;
    float:left;
    margin-left:10px;
}
section#usercontent article section#menuform {
    border:1px solid black;
    height:50px;
}
section#usercontent article section#shareform {
    border:1px solid black;
}
section#usercontent article section#shareform table {
    margin:0 auto;
    margin-bottom:8px;
    margin-top:8px;
}
section#usercontent article section#shareform table td {
    padding:2px;
}
section#usercontent article section#shareform input#btn_share {
    border:1px solid #E0BE47;
    border-radius:8px;
    width:58px;height:20px;
    background-color:#FAF5CE;
    cursor:pointer;
    font-size:12px;
    color:#323232;
    float:right;
}
section#usercontent textarea {
    height:55px;
}

/*aside styles*/

section#usercontent aside {
    width:340px;
    float:right;
    margin-right:10px;
}
section#usercontent aside, section#usercontent article {
    margin-top:10px;
    margin-bottom:10px;
    border:1px solid #E0BE47;
    border-radius:8px;
}

出力

ここに画像の説明を入力してください

この領域で問題が発生しましたセクション＃usercontentarticle＃notifications中央に配置する方法がわかりませんすでにmargin：0autoを使用しています。これを修正するための提案が必要です、ありがとう！

4

2 に答える 2

3

float: left; を使用しています。記事について。フロートを追加: なし; 「section#usercontent article#notifications」にするか、「section#usercontent article」からフロートを削除します。

于 2012-08-26T07:14:48.830 に答える
3

これを試すことができます：

HTML

<section id="usercontent">
        <h1>Section - User Content</h1>
            <article id="notifications">
                <span>Notifications</span>
                <p>Why I can't center this? I already use margin:0 auto;</p>
            </article>
        <article>
            <h1>Article - Left Content</h1>
                <section id="menuform">
                    <h1>User Menus</h1>
                </section>
                <section id="shareform">
                    <h1>Shout to the world</h1>
                    <form method="post">
                    <table>
                        <tr>
                            <td>Shout to the world:</td>
                        </tr>
                        <tr>
                            <td><textarea name="user_post" required="required"></textarea></td>
                        </tr>
                        <tr>
                            <td><input id="btn_share" type="submit" value="Share" name="share"></td>
                        </tr>
                    </table>
                    </form>
                    <?php
                    if(isset($_POST['share'])){

                    }
                    ?>
                </section>
        </article>
        <aside>
            <h1>Aside - Right Content</h1>
        </aside>
        <div id="clearfloats"></div>
    </section>

CSS

section#usercontent {
    width:600px;
    background-image:url('../img/content.png');
    font-size:13px;
    color:#323232;
}
section#usercontent h1 {
    visibility:hidden;
    position:absolute;
}

/*clear floats*/

section#usercontent div#clearfloats {
    clear:both;
}

section#usercontent article#notifications {
    width:500px;
    height:40px;
    text-align:center;
}

/*article styles*/

section#usercontent article {
    width:220px;
    margin-left:30px;
}
section#usercontent article section#menuform {
    border:1px solid black;
    height:50px;
}
section#usercontent article section#shareform {
    border:1px solid black;
}
section#usercontent article section#shareform table {
    margin:0 auto;
    margin-bottom:8px;
    margin-top:8px;
}
section#usercontent article section#shareform table td {
    padding:2px;
}
section#usercontent article section#shareform input#btn_share {
    border:1px solid #E0BE47;
    border-radius:8px;
    width:58px;height:20px;
    background-color:#FAF5CE;
    cursor:pointer;
    font-size:12px;
    color:#323232;
    float:right;
}
section#usercontent textarea {
    height:55px;
}

/*aside styles*/

section#usercontent aside {
    width:340px;
    float:right;
    margin-right:10px;
}
section#usercontent aside, section#usercontent article {
    margin-top:10px;
    margin-bottom:10px;
    border:1px solid #E0BE47;
    border-radius:8px;
}

JSFIDDLE リンクはこちら

于 2012-08-26T07:30:48.737 に答える