CSS文本对齐不工作

Question

我有一个sicky页脚

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

原因是，跨度默认为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; 
} 

Demo

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> 

Answer 4

#footer { 
height: 10px; 
} 

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

请试试这个代码

Answer 5

我们使用 '显示：表列;'当我们在父div中有display:table;时。 div默认为display:block，所以你不需要为它写属性。

您应该尝试为#copyright和#socials浮动而不是文本对齐。

写这个CSS

#footer { 
    height: 10px; 
    } 

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