居中页脚网页

-1

我正在建设一个网站，我有一个包装类来修复一些元素到网页中心。但是，页脚菜单不会发生，另一方面，我可以使用徽标和一些文字来完成。我有这样的代码：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); 
}

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

我想我做的浮动部分错了。我怎样才能把页脚部分也放在网页的中心。

这五列应该是内联的，并且徽标不在蓝色区域。

在此先感谢。

编辑：新增布局PRINTSCREEN Layout example

EDIT2：我多么希望菜单 Desired menu

来源

2014-05-01 Andre Roque

图像SRC是'图像/ logo_small.png'，这指的是本地图像到您的网站，我们无法看到它所以基本上我们不知道它会是什么样子。您应该将整个http链接放在那里，以便我们可以准确地看到图像的外观。 –

问题不在图像上，是在页脚栏上。在我的预览中，他们都在左边，我希望他们居中。正如我所说， –

例子：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); 
}

来源

2014-05-01 11:39:00 guinatal

版权和顶部标志行为正确。问题出现在页脚菜单上。我添加了一个布局示例 –

从#footer_menu中删除“float：left” – guinatal

当我这样做的时候，所有的事都有点偏右，包括背景。我想要背景保持不变，但列移动 –

插入text-align:center;在ID 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

来源

2014-05-01 11:46:41

这将对齐每列内的文本。我想要的只是“转移”所有5列，与标识对齐。 –

您希望列在页脚中间对齐吗？ –

是的，我添加了一个图像与我想要菜单的位置。在简历中，我希望我的网页显示在1024屏幕和更大的屏幕上，其中的数据都在中心这就是为什么我创建包装类 –

居中页脚网页

回答

相关问题