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

原因是，默认情况下，跨度为display: inline。这意味着它不会填满整个div，所以你最终会看到彼此相邻。

你的其他＆＃34;问题＆＃34; div是display:table-row - 这有什么理由吗？如果您使用display:table拥有该页脚的父div，则它应该按原样运行。如果没有，则需要删除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

我们使用＆＃39; display：table-row;＆＃39;当我们在父div中有display:table;时。 div默认为display:block，因此您无需为其编写属性。

你应该尝试浮动#copyright和#socials而不是text-align。

写这个CSS

 #footer {
    height: 10px;
    }

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