CODEWITHSUNDEEP
htmlcsshtml-listscenterfooter
heartcube
heartcube

Reputation: 119

Footer UL won't center

I am trying to center my footer with some link icons, but it just won't work, it still floats to the right.

.links {
    list-style: none;
    float: left;
    display: block;
    margin: 0 auto;
    width: 300px;
}

.links ul li {
     display: inline-block;
}

.links ul img {
    padding: 2.5% 4%;
    height: 40px;
}
<div class="links">
    <ul>
    	<li><a href="x"><img src="img/mail.png" alt="Email"></a></li>
    	<li><a href="x"><img src="img/twitter.png" alt="Twitter"></a></li>
    	<li><a href="x"> <img src="img/tumblr.png" alt="Tumblrn"></a></li>
    	<li><a href="x"><img src="img/instagram.png" alt="Instagram"></a></li>
        <li><a href="x"> <img src="img/linkedin.png" alt="LinkedIn"></a></li>
    </ul>
    </div>

Upvotes: 0

Views: 845

Answers (2)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38797

Try apply the .links CSS style properties to the actual <ul> rather than the parent container. The combination of fixed width and auto margin will allow it be centered on the screen. This would also allow you to style the .links container as necessary.

Hopefully this helps.

Thanks!

CSS

.links ul {
    list-style: none;
    display: block;
    margin: 0 auto;
    width: 300px;
    text-align: center;
}

.links ul li {
     display: inline-block;
}

.links ul img {
    padding: 2.5% 4%;
    height: 40px;
}

HTML

<div class="links">
    <ul>
        <li><a href="x"><img src="img/mail.png" alt="Email"></a></li>
        <li><a href="x"><img src="img/twitter.png" alt="Twitter"></a></li>
        <li><a href="x"> <img src="img/tumblr.png" alt="Tumblrn"></a></li>
        <li><a href="x"><img src="img/instagram.png" alt="Instagram"></a></li>
        <li><a href="x"> <img src="img/linkedin.png" alt="LinkedIn"></a></li>
    </ul>
</div>

Upvotes: 1

Banzay
Banzay

Reputation: 9470

As I can see the div floats left. You need to remove float: left; from .links style, and add text-align: center to center list items.

.links {
    list-style: none;
    display: block;
    margin: 0 auto;
    width: 300px;
    text-align: center;
}

.links ul li {
     display: inline-block;
}

.links ul img {
    padding: 2.5% 4%;
    height: 40px;
}
<div class="links">
    <ul>
    	<li><a href="x"><img src="img/mail.png" alt="Email"></a></li>
    	<li><a href="x"><img src="img/twitter.png" alt="Twitter"></a></li>
    	<li><a href="x"> <img src="img/tumblr.png" alt="Tumblrn"></a></li>
    	<li><a href="x"><img src="img/instagram.png" alt="Instagram"></a></li>
        <li><a href="x"> <img src="img/linkedin.png" alt="LinkedIn"></a></li>
    </ul>
    </div>

Upvotes: 2

Related Questions