UL不以div爲中心

Question

我想將UL中心放在標題中，但它們保持自己的位置。我想過使用溢出，但在另一個問題上發佈的解決方案沒有溢出。 http://codepen.io/anon/pen/jyubq

這裏的CSS：

#header ul { 
display: inline-block;} 

#header { 
z-index: 1; 
position:fixed; 
background-color: #668284; 
width: 99.5%; 
height: 60px; 
margin-top: -10px; 
margin-bottom: 5px;} 

#header ul li { 
width:48px; 
height:48px; 
margin-left:15px; 
margin-top: 5px; 
display:inline-block; 
background-color:#000000; 
padding:0; 
text-align: center;} 

#google{ 
width:48px; 
height:48px; 
background-image:url('images/googleplus.png'); 
display:block;} 

#facebook{ 
width:48px; 
height:48px; 
background-image:url('images/facebook.png'); 
display:block;} 

#twitter{ 
width:48px; 
height:48px; 
background-image:url('images/twitter.png'); 
display:block;} 

#header ul li#google{ 
background-color:#d34836; 
transition:background-color; 
transition-duration:0.17s;} 

#header ul li#google:hover{ 
background-color:#c23725;} 

#header ul li#facebook{ 
background-color:#3b5998; 
transition:background-color; 
transition-duration:0.17s;} 

#header ul li#facebook:hover{ 
background-color:#2a4887;} 

#header ul li#twitter{ 
background-color:#4099ff; 
transition:background-color; 
transition-duration:0.17s;} 

#header ul li#twitter:hover{ 
background-color:#3188ee;} 

#name { 
float: left; 
font-size: 20px; 
padding-top: 5px; 
margin-left: 5px;} 

#email { 
float: right; 
margin-right: 5px; 
padding-top: 5px; 
font-size: 16px; 
font-family: Verdana, sans-serif; 
color: #ffffff;} 

這裏是HTML部分：

<div id="header"> 
     <p id="name">Your Name Here</p> 
     <a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a> 
     <ul> 
      <li id="facebook"><a id="facebook" href="#"></a></li> 
      <li id="google"><a id="google" href="#"></a></li> 
      <li id="twitter"><a id="twitter" href="#"></a></li> 
     </ul> 
    </div> 

Answer 1

這個代碼將修復

#header ul {  
    margin:0 auto; 
    text-align:center; 
} 

codepen鏈接

http://codepen.io/anon/pen/ivjfD

Answer 2

在#header ul刪除display: inline-block使用width: 100%和text-align: center：

#header ul { 
 
    width: 100%;/*add width 100%*/ 
 
    text-align: center;/*add text-align center*/ 
 
} 
 
#header { 
 
    z-index: 1; 
 
    position:fixed; 
 
    background-color: #668284; 
 
    width: 99.5%; 
 
    height: 60px; 
 
    margin-top: -10px; 
 
    margin-bottom: 5px; 
 
} 
 
#header ul li { 
 
    width:48px; 
 
    height:48px; 
 
    margin-left:15px; 
 
    margin-top: 5px; 
 
    display:inline-block; 
 
    background-color:#000000; 
 
    padding:0; 
 
    text-align: center; 
 
} 
 
#google { 
 
    width:48px; 
 
    height:48px; 
 
    background-image:url('images/googleplus.png'); 
 
    display:block; 
 
} 
 
#facebook { 
 
    width:48px; 
 
    height:48px; 
 
    background-image:url('images/facebook.png'); 
 
    display:block; 
 
} 
 
#twitter { 
 
    width:48px; 
 
    height:48px; 
 
    background-image:url('images/twitter.png'); 
 
    display:block; 
 
} 
 
#header ul li#google { 
 
    background-color:#d34836; 
 
    transition:background-color; 
 
    transition-duration:0.17s; 
 
} 
 
#header ul li#google:hover { 
 
    background-color:#c23725; 
 
} 
 
#header ul li#facebook { 
 
    background-color:#3b5998; 
 
    transition:background-color; 
 
    transition-duration:0.17s; 
 
} 
 
#header ul li#facebook:hover { 
 
    background-color:#2a4887; 
 
} 
 
#header ul li#twitter { 
 
    background-color:#4099ff; 
 
    transition:background-color; 
 
    transition-duration:0.17s; 
 
} 
 
#header ul li#twitter:hover { 
 
    background-color:#3188ee; 
 
} 
 
#name { 
 
    float: left; 
 
    font-size: 20px; 
 
    padding-top: 5px; 
 
    margin-left: 5px; 
 
} 
 
#email { 
 
    float: right; 
 
    margin-right: 5px; 
 
    padding-top: 5px; 
 
    font-size: 16px; 
 
    font-family: Verdana, sans-serif; 
 
    color: #ffffff; 
 
}

<div id="header"> 
 
    <p id="name">Your Name Here</p> \t <a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a> 
 

 
    <ul> 
 
     <li id="facebook"><a id="facebook" href="#"></a> 
 
     </li> 
 
     <li id="google"><a id="google" href="#"></a> 
 
     </li> 
 
     <li id="twitter"><a id="twitter" href="#"></a> 
 
     </li> 
 
    </ul> 
 
</div>