css - 页面中心的页眉和页脚

Question

任何人都可以附加此代码以在中心制作页眉和页脚，例如。左右边距应该相同

.newheader
{
    background:#000;
    height:30px;
    left:0;
    position:fixed;
    width:100%;
    top:0;
}
.newfooter
{
    background:#000;
    bottom:0;
    height:30px;
    left:0;
    position:fixed;
    width:100%;
}

Answer 1

将元素放置在页面中间的标准方法是定义一个小于全宽的宽度，然后使用 auto 设置它的边距。

例如

.newheader {
    width:960px; /* less than 100% since 100% has no margin */
    margin : 0 auto /* top and bottom margin = 0 left and right auto*/
}

更新示例

这里有一个基于页面的示例链接。关联

全屏版链接

Answer 2

您是否只是将页眉和页脚中的内容居中 - 就像文本一样？

.newheader                /* remove width: 100% */
{
    text-align: center;   /* this line */
    background:#000;
    height:30px;
    left:0;          /* this is setting the div all the way to the left */
    position:fixed;             
    top:0;
}

试试这个

.newheader
{
    background:#000;
    height:30px;    
    position:relative;       
}

.header_container
{
    top: 0px
    position: fixed;
    text-align: center;
    width: 100%;
}

将标头放入容器中。

Answer 3

我认为您只需要同时添加text-align:center;newHeader 和 newFooter。由于您已经处于 100% 的宽度，因此不会有边距，因为它将占用 100% 的浏览器。

<style type="text/css">
.newheader {
    background:#FFF;
    top:0;
    height:30px;
    position:fixed;
    width:100%;
    text-align:center;
}

.newfooter {
    background:#CCC;
    bottom:0;
    height:30px;
    position:fixed;
    width:100%;
    text-align:center;
}
</style>

<div class='newHeader'>
   Test Header
</div>
<div>
    <p>Content</p>
</div>
<div class='newFooter'>
   Test Footer
</div>

Answer 4

根据对原始帖子的评论：.newheader { background:#000; height:30px; left:5%; position:fixed; width:90%; top:0; }是海报所做的尝试。

如果你有 90% 的宽度，你可以像这样居中这个标题：

.newheader {
    /*remove position: fixed; left: 5%; top: 0; */
    width:90%;
    margin: 0 auto; /* this centers it */
    height: 30px;
    background: #000;
}

这是结果的示例JSFiddle。