css - 如何集中包含 UL 的子 DIVS？

Question

我正在构建一个页脚，但我无法将包含指向各个页面的链接的 4 个 div 集中起来。在 Dreamweaver 上它表现正确，但一旦我上传它或在 JSFIDDLE 上测试它，它就会分散。

理想情况下，我希望它看起来像这样，每个 div 在页脚中“居中”:

        Random information above the divs below (displayed center of footer)

                 Product      Company      Etc....        Contact

                 link         link

                 link         link

等等。

我这里有一个具有完整代码的演示:http://jsfiddle.net/NkFe9/3/

这是一些 CSS:

/*global footer settings*/
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;

background-image:url(../img/index/footer/pixelpatterns.png);
background-repeat:repeat;

}


#insidefooter {
margin-top: 20px;
text-align: center;
}

/*settings for social media buttons*/
#insidefootertermsplusbuttons li {
display: inline;
color: #C9C9C9;

}

 #insidefooterone h5, #insidefootertwo h5, #insidefooterthree h5, #insidefooterfour h5 {
text-align:left;
margin-bottom: 0;
color:#FFFFFF;
}

 #insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}

#insidefooterone li, #insidefootertwo li, #insidefooterthree li, #insidefooterfour li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}

#disclaimer {

margin-top: 20px;
font-size: 9px;
text-align: center;
margin-bottom: 0;
}

#disclaimer p {
text-align:center;
color: #C9C9C9;
}

谢谢

Answer 1

尝试将 padding:0 添加到 ul

#insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
    list-style: none;
    text-align: left;
    margin-left: 0;
    color: #C9C9C9;
    padding:0
    }

DEMO

并且不要根据 Dreamweaver Design View 来判断输出。总是喜欢在浏览器中签到。

---

您需要使用 margin:0 auto 使 div 居中对齐。 margin:0 auto 与 float:left 没有任何区别。所以你需要消除父 div 中的 float: left。

并尝试将父 div 添加到 ul 链接，以便于对齐它。<强> Updated Demo