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