如何居中div并保持对齐嵌套浮动div？

Question

我有 wrapper ，例如div，其中包含两个嵌套的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

您可以对这3个元素使用hack display: table-cell。

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

Fiddle :: full code

Answer 2

删除float和#A的{​​{1}}将使您#b在包装器中居中。对于div内的两个max-width，您可以将两个div始终彼此相邻的方式设置为div。

选中 fiddle ，可能会对您有所帮助

HTML：

wrapper div

CSS

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

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>

您可以将两个标签放在容器内并设置最大宽度。然后将那个标签居中。