如何居中div並保持對齊嵌套浮動div？

Question

我有像div一樣的wrapper ，它包含兩個嵌套的div。 我需要它們居中，我會動態添加內容（輸入），我需要一個放在左邊，另一個放在右邊。

我試過了：

<div id="matriz">dsg
    <div id="A">ds</div>
    <div id="b">dsa</div>
</div>

使用以下CSS：

#matriz {

    padding-top: 20px;
    text-align: center;
}

#A {

    float: left;
    display: inline-block;
}

#b {

    float: right;
    display: inline-block;
}

然而，內部div然后不顯示居中，但在左右極端，有一個空的居中空間。

我知道float: left和float: right是這個。 但是我該怎么做呢？

我需要所有div在屏幕上居中（ viewport ？）

此外，嵌套的div應該放在一起，它們之間沒有空的居中空間。

Answer 1

你可以使用hack display: table-cell來獲得這3個元素。

#matriz {
    padding-top: 20px;
    text-align: center;
    display: block;
    width: 200px;
}

#A{
    float: right;
    text-align: left;
    display: inline-block;
    width: 50px;
}

#b{
    float: left;
    text-align: right;
    display: inline-block;
    width: 50px;
}

小提琴::完整代碼

Answer 2

刪除#A和#b的float將使div在包裝器中居中。 你可以做的是將兩個div始終彼此相鄰地設置為wrapper div內的兩個div的max-width 。

檢查這個小提琴 ，可能會幫助你

HTML：

<div id="matriz">
    <div id="top">Top content</div>
    <div id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

CSS

 #matriz {
    width:100%;
    background-color:#ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    overflow:hidden;
    font-size:0;
}

#top{
    width:100%;
    background-color:blue;
    font-size:16px;
}

#left {
    background-color:yellow;
    max-width:50%;
    display: inline-block;
    font-size:16px;
}

#right {
    max-width:50%;
    background-color:green;
    display: inline-block;
    font-size:16px;
}

Answer 3

試試這個http://jsfiddle.net/JP5Eu/

HTML：

<div id="matriz" class="">
    <div id="top">top</div>
    <div id="a">left</div>
    <div id="b">right</div>
</div>

CSS

#matriz {
    position:absolute;

    width:100%;
    padding-top: 20px;
    text-align: center;
    background:red;
}


#a {
    width:50%;
    float: left;
    display: inline-block;
}

#b {
     width:50%;
    float: right;
    display: inline-block;
}

Answer 4

這是一個不同的選擇。

http://jsfiddle.net/DrewGoldsberry/JP5Eu/1/

    <div id="matriz" class="">
<div id="CenteredTag">
<div id="a">left</div>
<div id="b">right</div>
   </div>
 </div>

您可以將兩個標簽放在容器內並設置最大寬度。 然后居中那個標簽。