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

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

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

原因是，span 默认是一个 display: inline。这意味着它不会填满整个 div，因此您最终会看到它们彼此相邻。

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

http://jsfiddle.net/Lqf91p8q/