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

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

此代码将修复

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

codepen link

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