在容器中居中 2 个 div（向左、向右浮动）

Posted 2023-03-06

【中文标题】在容器中居中 2 个 div（向左、向右浮动）

【英文标题】：Center 2 divs(Floating lef,right) in a container

【发布时间】：2013-05-01 23:05:03

【问题描述】：

我尝试了在这个网站上找到的多种方法，但似乎没有任何帮助。

我试图在一个宽度为 100% 的容器中将左右浮动的 2 个 div 居中。

CSS 片段：

#body-container 
    background: none;
    height: 100%;
    width: 100%;
    margin: 0 auto;


    #body-inner 
    float: left;
    width: 550px;
    left: 325px;
    margin: 0 auto;
    background: none;
    padding-top: 3%;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;


#bodybox 
    margin: 0 auto;
    width: 200px;
    height: 100%;
    right: 325px;
    background: none;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;   

【问题讨论】：

也提供 html 代码，以便清楚您在做什么。

我在这里看不到任何float: right 指令。请提供代码和小提琴

right: 325px on #bodybox 与您的代码当前一样。

【参考方案1】：

Could this be what you're looking for? Click here...

如果我理解您的问题，您正在尝试将<div> 居中，该<div> 还有两个<div> 父母...

代码片段：

#body-container 
    background: none;
    height: 100%;
    width: 100%;
    /*margin: 0 auto;*/

    /* testing border and height, could be deleted */
    border: solid;
    height: 500px;

#body-inner     
    width: 550px;
    margin: 0 auto;
    background: none;
    padding-top: 3%;
    padding-left: 10px;
    padding-right: 10px;
    /*border-left: 1px solid #000000;
    border-right: 1px solid #000000;*/

    /* testing border and height, could be deleted */
    border: solid;
    height: 400px;

#bodybox 
    margin: 0 auto;
    width: 200px;
    height: 100%;
    /*right: 325px;*/
    background: none;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;

    /* testing border and height, could be deleted */
    border: solid;
    height: 400px;

【参考方案2】：

您需要对浮动的工作原理进行一些研究，因为我认为您的想法是错误的。浮动一个div 左一个右，没有办法将它们居中，因​​为它们是浮动的。 left 和 right 属性不起作用，除非元素被定位（绝对的、固定的或具有某些含义的相对）。此外，您似乎正试图让#bodybox 的右边缘与#body-inner 的左边缘对齐。这不起作用，因为right 属性是从屏幕的右边缘而不是左边缘计算的。此外，您将固定框尺寸与流体容器宽度混合。这很好，如果你考虑到它们碰撞时会发生什么。

如果您只是想将两个 <div> 并排对齐，并在页面上居中。在这种情况下，inline-block 可能是您的朋友。关于空白、字体大小、内容顺序等有很多影响和解决方法，但基本上你会这样做：

#body-container 
    width: 100%;
    text-align: center;

#body-inner 
    width: 550px;

#bodybox 
    width: 200px;

在上面，只要容器足够宽，两个<div>就会并排放置，一旦容器太小，它们就会一个接一个地显示，每个都位于容器的中心。