使用CSS3水平对齐div

Question

这是我的代码。我将这些div作为表格单元格

<div class="logo">
text
</div>

<div class="stats" >
text
</div>

和我的css

.logo
{
    display:table-cell;
    width:420px;
}

.stats
{
    display:table-cell;
    width:200px;
}

是否有可能以某种方式将第一个div与左侧对齐而第二个向右对齐而不使用浮点数？ 或者只是将它们内部的内容左右对齐？

Answer 1

除了使用像表格单元这样的模糊显示方法之外，还有更简洁的方法可以解决这个问题 - 通常您可以使用block，inline或inline-block完成所需的操作。你在做什么需要table-cell？

话虽如此，你可以做一些事情。要在这些元素中对齐文字或内嵌内容，只需text-align - left或right。如果您正在嵌套div，则可以应用.logo *{ float: left; }等规则。

我不熟悉表格单元格显示的动态，但如果您想在不使用浮动的情况下进行定位，通常会position: absolute;与left: 0px;和right: 0px;一起进行。这有其自身的一系列问题。

Answer 2

在另一个注释中，您可以使用带浮点的填充来创建表的伪效果，并且“padding + margin + constraint div”被证明是我最好的对齐属性...虽然这可能无法解决您的问题“没有浮动”的问题。