將div對准一行並水平居中

Question

所有三個框（box1，box2和box3）應位於同一行上並居中對齊。

這是以下內容的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

更新：如果您遇到一些單行間隙問題，請考慮這篇文章： 使用inline-block來消除行間隙

我對您的演示進行了一些修改，您可以使用以下方法輕松進行修改：

display: inline-block;

而不是使用

float: left; 。

加入

text-align: center;

放在頂部的容器可幫助您使孩子居中。

修改后的演示/樣本

更清晰的代碼

 #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

嘗試這個。

在這里查看演示

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

這是一個小提琴 。

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設置寬度，以使其通過邊距居中對齊。 我還為容器1和包裝器添加了溢出自動功能，以清除浮點數

#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的標記，您的問題就會得到解決。

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

好了，您可以修復一些問題以使該工作按所述進行。 我為每個屬性添加了一些一般性說明，以期使您得到答案，希望您能夠理解正在發生的事情，而不僅僅是復制/粘貼有效的答案（並不是說始終是壞事，但學習也很重要；））

對於#container1

1. 您需要定義一個寬度。 我將其設置為三個子div的總寬度為300px。 通常，這是行不通的，因為由於div邊框，您必須考慮增加的寬度，但是我們可以使用box-sizing屬性（稍后）解決此問題。
2. 將邊距設置為自動。 這實際上將使容器div在頁面上居中（使其他元素居中更容易）。
3. 添加屬性overflow：auto; 這將使虛線在嵌套在其中的浮動元素周圍流動。 沒有這個，它們看起來就好像只有一行。

對於#box1,#box2,#box3

• 添加屬性box-sizing並將其設置為border-box 。 然后，這將計算所有三個框的寬度，以包括您指定的100px寬度中的填充，邊框和邊距。 請注意，box-sizing屬性是CSS3屬性，在較舊的瀏覽器中不會正確顯示（ 請參閱此處，以獲取受支持的瀏覽器列表以及如何使用該屬性 ）。 在這種情況下，最后一個元素將被強制顯示在其他兩個元素的下方。 如果發生這種情況，您可以計算邊界的附加像素寬度（在這種情況下為6個附加像素），以再次正確放置對象。

對於#box3

• 您需要添加float:left; 再次對此。

這是更新的JSFiddle，其中包含您修改的代碼http://jsfiddle.net/iandbanks/7jctu0az/11/

Answer 9

更新的代碼

刪除float: left #box1和#box2 float: left

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>