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*/
}

使用示例进行更新

这是指向基于页面的示例的链接。 link

全屏版link

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

我认为你只需要为newHeader和newFooter添加text-align:center;。由于您已经处于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。

页面中心的页眉和页脚

4 个答案: