html - CSS 文本对齐不起作用

标签 html twitter-bootstrap css

我有一个恶心的页脚

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

好像没有对齐。请帮忙。谢谢

最佳答案

您可以使用 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/

关于html - CSS 文本对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31332582/

相关文章:

html - div 和 span 之间的 float 图像

html - CSS 高级 OTF 功能不起作用

php - 将 php 变量传递给模态 Twitter Bootstrap 不起作用

javascript - 在前面显示一半图像,在后面显示一半图像

javascript - 阴影框叠加单击淡出

javascript - 尝试在 javascript 中应用 CSS 转换

html - 是否可以像css一样将字体文件嵌入到html中?

javascript - 用户点击 Twitter Bootstrap 链接后,如何在移动 View 中自动折叠顶部导航栏?

css - 简单的 css :before:hover not working? CSSlint 没有错误?

javascript - Tempus-dominus 和 sweetalert2