Question

我刚刚处理响应代码，由于某种原因，我不能在div的中心显示2个列表，移动视图的宽度为100％。在下面的css代码中是否存在一些可能导致其无法显示居中的内容？

这两个列表都有.social-media和.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;
 }

Answer 1

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

Answer 2

我已经使用了你提供的代码，在jsfiddle看起来很乱（示例代码不完整等）。我认为这应该为你做，或者至少得到你closer。我所做的基本上是将社交ul包装成两个div。 center-social跨越整个宽度和center-s trys以提供宽度的概念，以便uls可以居中。在您的实际页面上试用它，它应该正确显示。它仅适用于示例中的社交ul。

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

将列表集中在100％div内

2 个答案: