将div对齐在一条线上并水平居中

Question

所有三个框（box1，box2和box3）应位于同一条线上并对齐中心。

的下方Here is a JsFiddle：

#wrapper { 
 
    background-color: lightcyan; 
 
} 
 
#container1 { 
 
    border: 2px dashed magenta; 
 
} 
 
#box1, 
 
#box2, 
 
#box3 { 
 
    height: 100px; 
 
    width: 100px; 
 
    postition: fixed; 
 
} 
 
#box1 { 
 
    border: 1px solid red; 
 
    float: left; 
 
} 
 
#box2 { 
 
    border: 1px solid green; 
 
    float: left; 
 
} 
 
#box3 { 
 
    border: 1px solid brown; 
 
}

<div id="wrapper"> 
 
    <div id="container1"> 
 
    <div id="box1"> 
 
     <p>Box 1</p> 
 
    </div> 
 
    <div id="box2"> 
 
     <p>Box 2</p> 
 
    </div> 
 
    <div id="box3"> 
 
     <p>Box 3</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

试图改变这些
从

#container1{ 
    border: 2px dashed magenta; 
} 

到

#container1{ 
    border: 2px dashed magenta; 
    display: table; 
    margin:0 auto; 
} 

还加浮动留给你的第三个盒子，像这样，

#box3{ 
    border: 1px solid brown; 
    float: left; 
} 

这里是一个fiddle。

Answer 2

#wrapper{ 
    background-color: lightcyan; 
} 

#container1{ 
    border: 2px dashed magenta; 
    text-align: center; 
} 

#box1,#box2,#box3{ 
    height:100px; 
    width: 100px; 
    display: inline-block; 
} 

#box1{ 
    border: 1px solid red; 
} 

#box2{ 
    border: 1px solid green; 
} 

#box3{ 
    border: 1px solid brown; 
} 



<div id="wrapper"> 
    <div id="container1"> 
     <div id="box1"> 
      <p>Box 1</p> 
     </div> 
     <div id="box2"> 
      <p>Box 2</p> 
     </div> 
     <div id="box3"> 
      <p>Box 3</p> 
     </div> 
    </div> 
</div> 

Answer 3

您需要添加浮动框。还需要为容器1设置一个宽度，使其能够通过边距进行中心对齐。我还添加了自动溢出到两个container1 &包装以清除浮动

#wrapper{ 
    background-color: lightcyan; 
    border: 2px dashed magenta;  
    overflow: auto; 
} 

#container1{ 
    overflow: auto; 
    width: 350px; 
    margin: 0px auto; 
} 

#box1,#box2,#box3{ 
    height:100px; 
    width: 100px; 
    float: left; 
} 

#box1{ 
    border: 1px solid red; 
} 

#box2{ 
    border: 1px solid green; 
} 

#box3{ 
    border: 1px solid brown; 
} 

http://jsfiddle.net/7jctu0az/4/

Answer 4

你可以有这样的小提琴：http://jsfiddle.net/7jctu0az/7/

只需使用HTML的标签，你的问题将得到解决。

#wrapper{ 
 
    background-color: lightcyan; 
 
} 
 

 
#container1{ 
 
    border: 2px dashed magenta; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#box1,#box2,#box3{ 
 
    
 
    display:inline-block; 
 
} 
 

 
#box1{ 
 
    border: 1px solid red; 
 
    
 
} 
 

 
#box2{ 
 
    border: 1px solid green; 
 
    
 
} 
 

 
#box3{ 
 
    border: 1px solid brown; 
 
}

<div id="wrapper"> 
 
    <div id="container1"> 
 
     <center> 
 
     <div id="box1"> 
 
      <p>Box 1</p> 
 
     </div> 
 
     <div id="box2"> 
 
      <p>Box 2</p> 
 
     </div> 
 
     <div id="box3"> 
 
      <p>Box 3</p> 
 
     </div> 
 
     </center> 
 
    </div> 
 
</div>

Answer 5

更新： 如果碰上一些单行的差距问题，请考虑这个帖子：fighting line-gaps with inline-block

我对您的演示做一些修改，你可以简单地做它与：

display: inline-block;

而不是使用

float: left;。

顶部容器添加

text-align: center;

帮助你中心的孩子。

revised demo/sample

更清洁的代码

#wrapper{ 
 
    background-color: lightcyan; 
 
} 
 

 
#container1{ 
 
    border: 2px dashed magenta; 
 
    text-align: center; 
 
} 
 

 
#container1 > div{ 
 
    height:100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
#box1{ 
 
    border: 1px solid red; 
 
} 
 

 
#box2{ 
 
    border: 1px solid green; 
 
} 
 

 
#box3{ 
 
    border: 1px solid brown; 
 
}

<div id="wrapper"> 
 
    <div id="container1"> 
 
     <div id="box1"> 
 
      <p>Box 1</p> 
 
     </div> 
 
     <div id="box2"> 
 
      <p>Box 2</p> 
 
     </div> 
 
     <div id="box3"> 
 
      <p>Box 3</p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 6

在你想要的最外层容器有虚线轮廓我创造了你这一个还有机会 - 我想这可能是你想要的。

jsFiddle

基本上只是浮所有3次潜水，保证金：0汽车为中心的集装箱，并clearfix的最外层容器：

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 

Answer 7

那么有几件事情可以解决，使这项工作如上所述。我已经添加了一般性描述，说明每个属性在让你回答问题时的作用，希望你能够理解正在发生的事情，而不是复制/粘贴在有效的答案中（不要说这总是一个坏事，但学习也很重要;））

对于#container1

1. 您需要定义的宽度。我已将它设置为300px的三个子div的总宽度。通常这是行不通的，因为 必须考虑由于div边框而增加的宽度，但我们 可以通过box-sizing属性（稍后）解决此问题。
2. 将您的边距设置为自动。这将实际上将页面中的容器 div居中（使其他元素居中更容易）。
3. 添加溢出属性：auto;这将允许虚线 围绕嵌套在内部的浮动元素流动。没有 这个，它会显得好像他们只是一个单一的行。

对于#box1,#box2,#box3

• 添加属性box-sizing并将其设置为border-box。然后，这将计算所有三个框的宽度，以包含您指定的宽度为100px的填充，边框和边距。请注意，box-sizing属性是一个CSS3属性，对于旧版本的浏览器不会正确显示（see here for a list of supported browsers and how to use the property）。在这种情况下，最后一个元素将被强制显示在其他两个元素下面。如果发生这种情况，您可以计算边界的附加像素宽度（在这种情况下为6个附加像素），以便再次正确地适应事情。

对于#box3

• 你需要重新添加float:left;了这一点。

这里有一个更新的jsfiddle与修改后的代码http://jsfiddle.net/iandbanks/7jctu0az/11/

Answer 8

尝试。

see demo here

HTML

<div id="main"> 

    <div id="container"> 

     <div id="box1"> 
      <p>Box 1</p> 
     </div> 

     <div id="box2"> 
      <p>Box 2</p> 
     </div> 

     <div id="box3"> 
      <p>Box 3</p> 
     </div> 

    </div> 

</div> 

CSS

#main{ 
    background-color: lightpink; 
    overflow: auto; 
    padding:15px; 
} 

#container{ 
    border: 1px solid grey; 
    width: 304px; 
    margin: 0 auto; 
    padding:5px; 
} 

#container:after{ 
    content: ''; 
    clear:both; 
    display: table; 
} 

#box1,#box2,#box3{ 
    height:100px; 
    width: 100px; 
    float: left; 
    border:1px solid red; 
} 

#box2{ 
    border-right: none; 
    border-left: none; 
} 

p{ 
    text-align:center; 
    line-height: 100px; 
    margin: 0; 
    padding: 0; 
} 

Answer 9

Updated Code

为#box1删除float: left和#box2

CSS

#container1{ 
    border: 2px dashed magenta; 
    display: table; /*Add this*/ 
    margin: 0 auto; /*Add this*/ 
} 

#box1,#box2,#box3{ 
    height:100px; 
    width: 100px; 
    display: table-cell /*Add this*/ 
} 

Answer 10

//use display:table in #box1,#box2,#box3; 
    #wrapper { 
     background-color: lightcyan; 
    } 
    #container1 { 
     border: 2px dashed magenta; 
    } 
    #box1,#box2,#box3 { 
     height: 100px; 
     width: 100px; 
     postition: fixed; 
    display:table; 
    } 
    #box1 { 
     border: 1px solid red; 
     float: left; 
    } 
    #box2 { 
     border: 1px solid green; 
     float: left; 
    } 
    #box3 { 
     border: 1px solid brown; 

    } 
    <div id="wrapper"> 
     <div id="container1"> 
     <div id="box1"> 
      <p>Box 1</p> 
     </div> 
     <div id="box2"> 
      <p>Box 2</p> 
     </div> 
     <div id="box3"> 
      <p>Box 3</p> 
     </div> 
     </div> 
    </div> 

Answer 11

只需添加display:table到#box3：

#wrapper { 
 
    background-color: lightcyan; 
 
} 
 
#container1 { 
 
    border: 2px dashed magenta; 
 
} 
 
#box1, 
 
#box2, 
 
#box3 { 
 
    height: 100px; 
 
    width: 100px; 
 
    /*position: fixed;*/ 
 
} 
 
#box1 { 
 
    border: 1px solid red; 
 
    float: left; 
 
} 
 
#box2 { 
 
    border: 1px solid green; 
 
    float: left; 
 
} 
 
#box3 { 
 
    border: 1px solid brown; 
 
    display:table; 
 
}

<div id="wrapper"> 
 
    <div id="container1"> 
 
    <div id="box1"> 
 
     <p>Box 1</p> 
 
    </div> 
 
    <div id="box2"> 
 
     <p>Box 2</p> 
 
    </div> 
 
    <div id="box3"> 
 
     <p>Box 3</p> 
 
    </div> 
 
    </div> 
 
</div>