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;
}

输出

在此处输入图像描述

我在这方面遇到问题 section#usercontent article#notifications 我不知道如何使它居中 我已经使用 margin:0 auto; 需要建议来解决这个问题，谢谢！

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 回答