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

Question

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

Here is a JsFiddle以下内容：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

<强>更新： 如果您遇到一些单线间隙问题，请考虑以下帖子：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 2

试试这个。

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 3

尝试更改这些 来自

#container1{
    border: 2px dashed magenta;
}  

到

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

还将浮动左侧添加到第三个框中，如此，

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

这是fiddle。

Answer 4

#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 5

您需要在框中添加浮动。还需要为container1设置一个宽度，使其能够通过边距对齐。我还在container1和amp;中添加了overflow auto。包装器清除浮子

#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 6

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

只需使用HTML标记，您的问题就会得到解决。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

如果您希望最外面的容器有虚线轮廓，我也会为您创建这个 - 我想这可能就是您想要的。

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 8

有很多事情你可以解决这个问题，如上所述。我已经添加了一般描述，说明了每个属性在获取答案时所做的工作，希望您能够理解正在发生的事情，而不是仅仅复制/粘贴有效的答案（不是说＆ ＃39;总是一件坏事，但学习也很重要;））

适用于#container1

1. 您需要定义宽度。我把它设置为的总宽度 三个孩子的div为300px。通常这不会起作用，因为你是 必须考虑由于div边界而增加的宽度，但我们 可以使用box-sizing属性（稍后）解决这个问题。
2. 将您的保证金设置为自动。这实际上是集装箱的中心 页面上的div（使其他元素更容易居中）。
3. 添加overflow：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 9

Updated Code

删除float: left和#box1

的#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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;