CSS文本对齐不工作

Question

我有个恶心的脚

display:table-row;

文本居中。

我希望版权与左派保持一致，社交媒体与右派保持一致。我做了这个：

<div id="footer">
<div id="container">
<span id="copyright">Copyright 2015</span>
<span id="socials">facebook</span>
</div>
</div>

css

#footer {
display: table-row;
height: 10px;
}

#copyright { text-align: left;}
#socials { text-align: right;}

它似乎不一致。请帮帮忙。谢谢

Answer 1

您可以使用浮点数来实现这一点。

#copyright { float: left; }
#socials { float: right; }

原因是，span在默认情况下是display: inline。这意味着它不会填满整个div，所以你最终会看到两个都在一起。

您的另一个“问题”是div有display:table-row -有什么原因吗？如果您有一个父div为该页脚，使用display:table，它应该正常工作。如果没有，则需要删除display:table-row。

http://jsfiddle.net/Lqf91p8q/

Answer 2

编辑：

我没有意识到您在页脚上使用display: table-row;。这就是导致你第一个问题的原因。您需要删除它，将宽度设置为100%，然后执行如下所示的浮动操作：

#footer {
    width: 100%;
    height: 10px;
}

#copyright {
    display: block;
    float: left;
}

#socials {
    display: block;
    float: right;
}

演示

Answer 3

<style>
  #footer {
display: table-row;
height: 10px;
}

#copyright {float:left;}
#socials {float: right;}
</style>
<div id="footer">
<div id="container">
<span id="copyright">Copyright 2015</span>
<span id="socials">facebook</span>
</div>
</div>