Search code examples
htmlcsscenterfooter

Trying to center footer links alongside some text


I am trying to center footer links with some text near it. The text i can just use text-align but that won't work for the links. Anyone know a solution?

jsfiddle - http://jsfiddle.net/p7fxqmrc/1/

<footer>
    <p>Copyright 2014</p>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</footer>



footer p{
    color:#5b5a5a;
    font-family:arial;
    font-size:14px;
    float:left;
    margin:10px;

}

footer ul li{
    float:left;
    margin:10px;

}

footer ul li a{
    text-decoration:none;
    color:#5b5a5a;
    font-family:arial;
    font-size:14px;
    float:left;

}

Solution

  • Please check this: jsFiddle.

    This is the updated CSS:

    footer p {
        color:#5b5a5a;
        font-family:arial;
        font-size:14px;
        margin:10px;
        text-align: center;
    }
    footer ul li {
        margin:10px;
        list-style: none;
        display: inline-block;
    }
    footer ul li a {
        text-decoration:none;
        color:#5b5a5a;
        font-family:arial;
        font-size:14px;
    }
    footer ul {
        text-align: center;
        padding-left: 0px;
    }