Html 如何使两个并排的div居中？_Html_Css

Html 如何使两个并排的div居中？

html css

Html 如何使两个并排的div居中？,html,css,Html,Css,我想把Div#Content&#侧边栏放在中间，这是我的代码，有人能解释一下如果Div是并排的，我会怎么做吗我已经更新了我现有的帖子以提供更多信息-谢谢 <body> <div id="wrapper"> <div id="header"> <div class="header">Title of Website</div> </div>

我想把Div#Content&#侧边栏放在中间，这是我的代码，有人能解释一下如果Div是并排的，我会怎么做吗

我已经更新了我现有的帖子以提供更多信息-谢谢

<body>
    <div id="wrapper">

        <div id="header">
            <div class="header">Title of Website</div>
        </div>

        <div id="menu">
            <div class="menu"><img src="images/menusample.png" alt="sample of js menu"></div>
        </div>

        <div id="content">Main content</div>

        <div id="sidebar">Sidebar/Widget</div>

        <div id="footer">Footer</div>

    </div>
</body>

如果要将宽度为1000px的

div

居中，则可以使用

margin:0 auto
示例：
    body {
    margin:0px 0px 0px 0px;
    background-image:url('images/nifla-bg.png');
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;

}

#wrapper {
    width:100%;
    height:auto;
    margin:0 auto;
}

#header {
    width:100%;
    height: 90px;
    clear: both;
    margin: 0 auto;
    background-image:url('images/header-bg.png');
}

#menu {
    width:100%;
    height:40px;
    background-color:#F4F4F4;
    clear: both;
    margin: 0 auto;
    text-align:center;
}


#content {
    width:700px;
    height:auto;
    float:left;
    background-color:blue;

}

#sidebar {
    width:300px;
    height:auto;
    float:left;
    background-color:gray;

}

#footer {
    clear: both;
    width:100%;
    height:90px;
    position:absolute;
    bottom: 0;
    margin: 0 auto;
    background-image:url('images/footer-bg.png');
}

.header {
    width:1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    color:#FFFFFF;
    font-size:14px;
    padding:15px;
}

.curly-font {
    font-family:'Pacifico', Verdana;
    font-size:30px;
    color:#FFFFFF;
}

.menu {
    width:1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}

 <div id="container">   
    <div id="content">Main content</div>
    <div id="sidebar">Sidebar/Widget</div>
 </div>

工作
将它们包装在另一个div中，相对定位并添加边距：0 auto。容易做；）
（下面片段中的宽度仅用于显示效果）

#内容{
宽度：70px；
高度：50px；
浮动：左；
背景颜色：蓝色；
}
#边栏{
宽度：30px；
高度：50px；
浮动：左；
背景颜色：灰色；
}
#包装纸{
宽度：100px；
位置：相对位置；
保证金：0自动；
}

这样做：
HTML
#container {width:1000px; margin: 0 auto;}

    <div id="wrapper">

    <div id="content">Main content</div>

    <div id="sidebar">Sidebar/Widget</div>

    </div>

    #wrapper {
        width: 1000px;
        margin: 0 auto;
    }

    #content {
        width:700px;
        height:auto;
        float:left;
        background-color:blue;

    }

    #sidebar {
        width:300px;
        height:auto;
        float:left;
        background-color:gray;

    }