Question

我是html和css的新手，并且我正在构建的一侧的布局有问题。我希望侧面的“top_header”和“top_menu”宽度为1920px，“main_section”只有1000px并且位于下方。之前当我将它全部设置为1000px的最大宽度时，它非常精细且居中但现在当我将整个页面更改为最大宽度1920px而main_section更改为1000px时，主要部分已浮动2左侧和我不能让它再次居中帮助。

HTML：

    <div id="big_wrapper">
        <header id="top_header">
            <h1>Welcome</h1>
        </header>

        <nav id="top_menu">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Shop</li>
            </ul>
        </nav>

            <div id="new_div">

            <section id="main_section">
                <article>
                    <header>
                        <hgroup>
                            <h2></h2>
                            <h3></h3>
                        </hgroup>
                    </header>
                    <p></p>
                    <footer>
                        <p></p>
                    </footer>
                </article>

            </section>

            <aside id="side_news">
                <h2></h2>
                <p></p>
            </aside>

            </div>

        <footer id="the_footer">
            <p></p>
            <p></p>
        </footer>
    </div>

CSS：

*{
    margin:0px;
    padding:0px;
}
h1{
    font: bold 25px Tahoma;
}
h2{
    font: bold 19px Tahoma;
}
h3{
    font: bold 14px Tahoma;
}
header, nav, section, article, hgroup, aside, footer;{
    display:box;
}
body{
    width:100%;
    display:-webkit-box;
    -webkit-box-pack: center;
}
#big_wrapper{
    max-width:1920px;
    margin: 20px 0px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1; 
}
#top_header{
    border: 2px solid black;
    padding:20px;
    border-radius:10px;
    background: #3b5998;
}
#top_menu{
    border: 2px solid black;
    border-radius:10px;
    text-align:center;
    margin-top:10px;
}
#top_menu li{
    list-style:none;
    display:inline-block;
    padding:5px;
    font: bold 14px Tahoma;
}
#new_div{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    border:5px solid red;
    width:1000px;
    margin:5px;
}
#main_section{
    border:2px solid black;
    border-radius:10px;
    margin: 30px 20px;  
    padding:20px;
    -webkit-box-flex:1;
}
#main_section article{
    margin:20px;
    padding:20px;
    border:1px solid black;
    border-radius:10px;
}
#main_section footer{
    text-align:right;
}
#side_news{
    border:1px solid black;
    border-radius:10px;
    margin:40px 0px;
    padding:20px;
    width:220px;
}
#the_footer{
    border-top:1px solid black;
    text-align:center;
    margin:10px;
}

Answer 1

将包装器div new_div的边距从5px更改为0 auto，如下所示：

#new_div {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    border: 5px solid red;
    width: 1000px;
    margin: 0 auto;
}

js使用上述代码：https://jsfiddle.net/e0d8my79/184/

如何居中对齐固定宽度的div？

1 个答案: