Question

我有一个我正在建设的页脚。

我希望能够将4个div放在页脚中心（如第一段或5个图标（无法渲染））。这样做的最佳方式是什么？

CSS：

#insidefooter, #disclaimer {
max-width: 960px;
min-width: 960px;
margin-left: 25%;
margin-right: auto;
}
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;
background-image:url(http://i.imgur.com/yb7j6PD.png);
background-repeat:repeat;
}
#insidefooter {
margin-top: 20px;
text-align: center;
}
/*settings for social media buttons*/
 #insidefootertermsplusbuttons li {
display: inline;
color: #C9C9C9;
}
#insidefooterone1 h5, #insidefootertwo1 h5, #insidefooterthree1 h5, #insidefooterfour1    h5 {
text-align:left;
margin-bottom: 0;
padding-bottom: 0;
color:#FFFFFF;
padding-left: 0px;
}
#insidefooterone1 li, #insidefootertwo1 li, #insidefooterthree1 li, #insidefooterfour1 li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
padding: 0;
}
#insidefooterone1 ul, #insidefootertwo1 ul, #insidefooterthree1 ul, #insidefooterfour1 ul {
list-style: none;
text-align: left;
padding-left: 0px;
padding-right: 0;
color: #C9C9C9;
overflow: hidden;
}
#disclaimer {
margin-top: 20px;
font-size: 9px;
text-align: center;
margin-bottom: 0;
}
#disclaimer p {
text-align:center;
color: #C9C9C9;
}
.ul_links {
overflow: auto;
display: inline-block;
min-width: 700px;
}

Answer 1

demo

删除

/* #insidefooter, #disclaimer {
    max-width: 960px;
    min-width: 960px;
    margin-left: 25%;
    margin-right: auto;
}*/

在

中添加#footer

margin 0 auto;

#footer {
    color: #C9C9C9;
    min-width: 1500px;
    background-color: #2d2d2d;
    list-style: none;
    height: 450px;
    background-image:url(http://i.imgur.com/yb7j6PD.png);
    background-repeat:repeat;
    margin 0 auto;
}

Answer 2

我解决了你的问题。所以我玩了很多代码，做了很多改动，结果如下：

http://jsfiddle.net/rYjS9/7/

实际的技巧是使用display: inline-block;和margin-left: auto; margin-right: auto;以及其他一些我已经改变的东西，正如你可以从jsfiddle看到的那样。 ;）

此致

Answer 3

删除以下代码和

#insidefooter, #disclaimer {
    max-width: 960px;
    min-width: 960px;
    margin-left: 25%;
    margin-right: auto;
}

粘贴代码

#insidefooter, #disclaimer {
    max-width: 960px;
    min-width: 960px;
    margin 0 auto;
}

Answer 4

管理解决问题。感谢您的时间和答案，但不幸的是，由于使用网格系统（导致页脚扭曲），所有这些都未能解决问题。

我需要做的是更改ul-links添加位置：relative并手动指定它的位置：

.ul_links{
   overflow: auto;
   display: inline-block;
   min-width: 700px;
   position: relative;
   left: 120px;
}

它可能不是最好也不是最简洁的方法，但它解决了这个问题。

Demo

如何在DIV中居中DIV？

4 个答案: