我正在构建一个页脚,但我无法将包含指向各个页面的链接的 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;
}
谢谢
最佳答案
尝试将 padding:0
添加到 ul
#insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
padding:0
}
并且不要根据 Dreamweaver Design View 来判断输出。总是喜欢在浏览器中签到。
您需要使用 margin:0 auto
使 div 居中对齐。 margin:0 auto
与 float:left
没有任何区别。所以你需要消除父 div 中的 float: left。
并尝试将父 div 添加到 ul
链接,以便于对齐它。
<强> Updated Demo
关于css - 如何集中包含 UL 的子 DIVS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23336898/