0

我希望我的页面类似于雅虎我的预期结果，代码如下。我尝试了不同的方法但不起作用。它应该在中间并且有以下部分。

预期结果

 50%            |LeftHeader                middleHeader                 RightHeade|    50% 
 50%            |                    50% Menu1 Menu2 Menu3 50%                    |    50%

 50%            |Content goes here ***********************************************|    50%
                |*****************************************************************|

 50%            |                   50% text of Footer goes here 50%              |    50%

这些行>> | 显示边框部分，例如页脚很大，但它的文本应该在中心。

我的代码如下

    <html>
    <head>
       <style>
    #wrapper {
        margin: 0 auto;
        width:50%;
    }
    #header {
        background-color:#faa;
        height:50px;
        font-size: 0;
    }
    #header > div {
        display: inline-block;
        width: 33.3333%;
        font-size: 12pt;
        height: 100%;
    }
    #left {
        background-color:red;
        height:20px;
    }
    #middle {
        background-color:yellow;
        height:20px;
    }
    #right {
        background-color:green;
        height:20px;
    }
    #menu {
        width: 100%;
        margin: 0 auto;
        background-color:#faa;
        height: 20px;
        font-size: 0;
    }
    #menu > a {
        display: inline-block;
        font-size: 12pt;
        width: 33.333%
    }
    #content {
        top:50px;
        bottom:150px;
        overflow:auto;
    }
    #footer {
        bottom: 0;
        width: 100%;
        background-color:#afa;
        height:150px;
    }
    #footer > div {
        margin-left: 50%;
    }
    </style

>
    </head>
    <body>
    <div id="wrapper">
        <div id="header">
            <div id="left">
              left header
            </div>
            <div id="middle">
              middle
            </div>
            <div id="right">
              right header
            </div>
        </div>
        <div id="menu">
         <a href="#">menu1</a>
         <a href="#">menu2</a>
         <a href="#">menu3</a>
      </div>
        <div id="content">
           content
        </div>
        <div id="footer">
           footer is here
        </div>
      </div>
4

2 回答 2

2

使用一系列<div>s in inline-block,relative位置 和margin: 0 auto居中。页脚可以放在底部position: absolute，但您必须手动添加边距，因为绝对定位不支持自动居中。

CSS：

#wrapper {
    margin: 0 auto;
    width:50%;
}
#header {
    background-color:#faa;
    height:50px;
    font-size: 0;
}
#header > div {
    display: inline-block;
    width: 33.3333%;
    font-size: 12pt;
    height: 100%;
}
#left {
    background-color:red;
    height:20px;
}
#middle {
    background-color:yellow;
    height:20px;
}
#right {
    background-color:green;
    height:20px;
}
#menu {
    width: 50%;
    margin: 0 auto;
    background-color:#faa;
    height: 20px;
    font-size: 0;
}
#menu > a {
    display: inline-block;
    font-size: 12pt;
    width: 33.333%
}
#content {
    top:50px;
    bottom:150px;
    overflow:auto;
}
#footer {
    position: absolute;
    bottom: 0;
    margin-left: 12.5%;
    width: 25%;
    background-color:#afa;
    height:150px;
}

在这里查看小提琴：http: //jsfiddle.net/8gmdk/

于 2013-03-26T01:13:48.907 回答
0

要将所有内容居中在屏幕中心，您可以使用以下命令：

body {
    width: 960px; /* define yours, you can also use max-width if you're going to use a fluid layout */
    position: relative;
    margin: 0 auto;
    left: 0;
    right: 0;
}

祝你好运！

于 2013-03-25T22:48:25.450 回答