Question

我不能把这个div放在我的生活中心。我在这里有点疯狂。我试过自动边距，文本对齐中心。我把它放在一个无序列表中。

#logoWrap {
    background:#F0F0F0;
    text-align:center;
}
#logowrapInner {
    width:80%;
    margin:auto;
}
ul#corpLogos {
    overflow:hidden;
    list-style:none;
    padding:15px;
}

ul#corpLogos li a {
    float:left;
    margin-right:20px;
    display:block;
    text-align:center;
    transition: all 0.3s ease 0s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

ul#corpLogos li a:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
        filter: url(#drop-shadow);
        -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
        filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

#corpLogos img { border : 0;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */ }

<div id="logoWrap">
<div id="logowrapInner">
<ul id="corpLogos">

<li><a href="http://www.bellator.com/" target="_blank"><img src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/bellator.png"/></li>  


<li><a href="http://www.ncaa.com/" target="_blank"><img src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/ncaa.png" /></li>


<li><a href="http://http://www.ufc.ca/" target="_blank"><img src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/ufc.png" /></li>


<li><a href="http://www.nhl.com/" target="_blank"><img src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/nhl.png" /></li> 


</ul>
</div>
</div>

Answer 1

margin: auto;不适合您，因为您需要为父容器指定宽度。

改变这个：

#logoWrap {
  background:#F0F0F0;
  text-align:center;
}

对于这样的事情：

#logoWrap {
  background:#F0F0F0;
  text-align:center;
  width: 800px;
}

请看这里的工作小提琴：http://jsfiddle.net/mp5Vn/

Answer 2

解决：http://jsfiddle.net/8V3Tr/7/

为UL添加宽度并使用margin：auto 0

此处仅进行更改：

#logowrapInner {
   width:100%;
}
ul#corpLogos {
    width:60%;
    overflow:hidden; 
    list-style:none;
    margin:0 auto;
}

不能以div为中心

2 个答案: