中心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

回答

相關問題