不能居中div

-2

我无法居中这个div为我的生活。我在这里有点疯狂。我已经尝试了自动保证金，文本对齐中心。我已经将它列入无序列表中。不能居中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>

来源

2014-03-05 Greg

什么格？ –

'-webkit-transition：如何放松0.3s;或者大部分CSS与你的问题有关？ – Phrogz

使用Firebug等向您展示UL的右侧有相当多的空间（徽标不在其中央）。 divs本身似乎是以中心为中心的。 –

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

添加宽度与UL并使用保证金：auto 0

只改变这里：要居中

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

来源

2014-03-05 21:41:33 Ljubisa

margin: auto;是不适合你的工作，因为你需要指定父容器的宽度。

更改此：

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

为了这样的事情：

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

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

来源

2014-03-05 21:40:54

回答

相关问题