Question

我正在建立一个网站，并且我有一个包装类来将一些元素修复到网页的中心。但是在页脚菜单中没有发生这种情况，另一方面我可以使用徽标和一些文本来完成。我有这段代码：here is the fiddle

<div id="footer">
    <div id="footer_menu" class="wrap">
        <div id="fst_column" class="divider footer_column">
            <ul class="menu">
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
            </ul>
        </div>
        <div id="sec_column" class="divider menu footer_column">
            <ul class="menu">
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
            </ul>
        </div>
        <div id="trd_column" class="divider menu footer_column">
            <ul class="menu">
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
            </ul>
        </div>
        <div id="frth_column" class="divider menu footer_column">
            <ul class="menu">
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
            </ul>
        </div>
        <div id="fvth_column" class="divider menu footer_column">
            <ul class="menu">
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
            </ul>
        </div>
    </div>
    <img id="logo_small" src="images/logo_small.png"/>
    <div id="copyright" class="wrap">
        Some Copyright text
    </div>

CSS：

.wrap{
    width: 1000px;
    margin: 0 auto;
    clear:both;
}

ul.menu{
    list-style-type: none;
    margin:0;
    padding:0;
}

.divider{
    height:90px;
    border-left:2px solid white;
}

#footer{
    width: 100%;
    height:100px;
    left:0px;
}

#footer_menu {
    overflow: hidden;
    float:left;
    width:85%;
    background-image: -webkit-linear-gradient( 45deg, rgb(0,159,194), rgb(0,15,61)); /* Safari */
    background-image: -moz-linear-gradient( 45deg, rgb(0,159,194), rgb(0,15,61)); /* Firefox */
}

.footer_column{
    width: 175px;
    padding-left:10px;
    padding-top:10px;
    font-size: 12px;
    line-height: 15px;
    font-family: "Quicksand";
    float:left;
    color:#FFFFFF;
}

#frth_column, #fvth_column{
    color:rgb(142,216,248);
}

版权文字行为正确（也是网页顶部的徽标），但页脚部分不行。

我想我对浮动部分做错了。如何将页脚部分也放在网页的中心。

五列应该是内联的，并且在蓝色区域外面有一个徽标。

提前致谢。

编辑：添加了版面printcreen Layout example

Edit2：我想要菜单 Desired menu

Answer 1

示例：http://jsfiddle.net/guinatal/WTE2v/8/

HTML

<div id="footer">
    <div id="footer_menu" class="wrap">
        <center>
        <div id="fst_column" class="divider footer_column">
            <ul class="menu">
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
            </ul>
        </div>
        <div id="sec_column" class="divider menu footer_column">
            <ul class="menu">
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
                <li>SomeText</li>
            </ul>
        </div>
        </center>
    </div>
    <img id="logo_small" src="images/logo_small.png"/>
    <div id="copyright" class="wrap">
        Some Copyright text
    </div>
</div>

CSS

.wrap{
    width: 1000px;
    margin: 0 auto;
    clear:both;
}

ul.menu{
    list-style-type: none;
    margin:0;
    padding:0;
}

.divider{
    height:90px;
    border-left:2px solid white;
}

#footer{
    width: 100%;
    height:100px;
    left:0px;
}

#footer_menu {
    overflow: hidden;
    float:left;
    width:85%;
    background-image: -webkit-linear-gradient( 45deg, rgb(0,159,194), rgb(0,15,61)); /* Safari */
    background-image: -moz-linear-gradient( 45deg, rgb(0,159,194), rgb(0,15,61)); /* Firefox */
}

.footer_column{
    width: 175px;
    padding-left:10px;
    padding-top:10px;
    font-size: 12px;
    line-height: 15px;
    font-family: "Quicksand";
    display:inline-block;
    color:#FFFFFF;
}

#frth_column, #fvth_column{
    color:rgb(142,216,248);
}

Answer 2

在ID text-align:center;

中插入footer-menu

#footer_menu {
    overflow: hidden;
    float:left;
    width:85%;
    background-image: -webkit-linear-gradient( 45deg, rgb(0,159,194), rgb(0,15,61)); /* Safari */
    background-image: -moz-linear-gradient( 45deg, rgb(0,159,194), rgb(0,15,61)); /* Firefox */
    text-align:center; // Changed
}

Fiddle

中心页脚网页

2 个答案: