中心100％的div

IM在响应代码工作刚才中，由于某种原因，我不能得到2列出在这对移动视图100％宽度的div中心显示一个列表。有没有什么，我错过了下面的CSS代码，可能会导致这不会显示居中？中心100％的div

两份名单有。社会媒体的类和.TOP-NAV

*** HTML ** * ** *

<div id="gezzamondo"> 

<div class="header"> 

<img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo" /> 

<ul class="top-nav"> 
<li><a href="#">About</a></li> 
<li><a href="#">Work</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 

<ul class="social-media"> 
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li> 
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li> 
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li> 
</ul> 


</div><!-- close header --> 
</div><!-- close gezzamondo -->

** CSS ****

body { 
background-color:#C09; 
font-family: 'Ubuntu', sans-serif; 
margin:0; 
padding:0; 
} 

img{ 
max-width:100%: 
} 

#gezzamondo{ 
width:100%; 
margin:0 auto; 
} 

.header{ 
background-color:#FFF; 
height:215px; 
width:100%; 
text-align:center; 
} 

#gezzamondo .logo{ 
width:183px; 
height:83px; 
margin:0 auto; 
margin-top:20px; 
} 

#gezzamondo .top-nav{ 
list-style: none; 
font-size:20px; 
font-weight:300; 
margin:0 auto; 

} 

#gezzamondo ul.top-nav li{ 
float:left; 
margin-right:30px; 
} 

#gezzamondo ul.top-nav li a{ 
text-decoration:none; 
color:#333333; 
} 

#gezzamondo .social-media{ 
position: absolute; 
list-style: none; 
width:162px; 
margin:0 auto; 
background-color:#06F; 
} 

#gezzamondo .social-media li img{ 
height:44px; 
width:44px; 
} 

#gezzamondo .social-media li{ 
float:left; 
margin-right:15px; 
} 

#gezzamondo .social-media li.last{ 
float:left; 
margin-right:0px; 
} 

#gezzamondo ul.top-nav li a:hover{ 
border-bottom:7px #FF0099 solid; 
color:#333333; 
}

来源

2012-11-29 Gezzamondo

您在#gezzamondo .social-media中将位置设置为绝对位置，只需移除该位置即可。

来源

2012-11-29 00:40:36 Ngl

与.top-nav一起看，我需要给它一个宽度之前它将中心？很难确定它的宽度，因为它的文本左边有空白，右边各有空格，以便将它们隔开......最好的办法是从列表中的最后一个中删除边距并确定ul宽度 – Gezzamondo

，您是否想要居中。 top-nav也是如此，如果是这样，请进行以下更改#gezzamondo ul.top-nav li {display：inline; margin-right：30px; }删除左侧的浮动 – Ngl

我用你提供的代码，它看起来一团糟到的jsfiddle（示例代码是不完整等）。我认为这应该为你做，或者至少让你closer。我所做的基本上是将社会ul包裹在两个div中。中心 - 社会跨越全宽和中心的提示以提供一个宽度的概念，因此可以将居中。试试看你的实际页面，它应该正确显示。它只适用于社会上的例子。

<div id="center-social"> 
    <div id="center-s"> 
<ul class="social-media"> 
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li> 
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li> 
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li> 
</ul> 
    </div> 
    </div>

来源

2012-11-29 00:36:33 Omega

中心100％的div

回答

相关问题