CODEWITHSUNDEEP
htmlcsscentering
Roland Jegorov
Roland Jegorov

Reputation: 819

UL doesn't center in div

I want to center the ULs in the header but they keep positioning themselves. I thought of using overflow but a solution posted in another question was without overflow. http://codepen.io/anon/pen/jyubq

Here's the 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;}

And here is the HTML part:

<div id="header">
        <p id="name">Your Name Here</p>
        <a href="mailto:[email protected]"><p id="email">[email protected]</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>

Upvotes: 2

Views: 136

Answers (2)

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

this code will fix

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

codepen link

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

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

Remove display: inline-block use width: 100% and text-align: center in #header ul:

#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>	<a href="mailto:[email protected]"><p id="email">[email protected]</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>

Upvotes: 2

Related Questions