Center footer links

I'm testing something on http://freemcpremium.co/test, and I'm trying to get the links in the footer display in the center, like how the copyright text is centered, but I can't manage it. Can someone help? Thanks.

 

Have you tried this?

footer#footer div.footer-links {
  display: table;
  height: 100%;
  margin: 0 auto;
}

Code (markup):

Instead of floating the lists, I'd probably make them inline-block and set the parent to {white-space: nowrap}.

cheers,

gary

 

The CSS is such a screwed up mess that it is a wonder it even renders.

The cause of the problem is probably this rule:
footer#footer div.footer-links > a, footer#footer div.footer-links > ul in compile.css that looks like it was written for the Comedy channel. it sets flat left when what the uls need is margin auto. The Css is such a disaster that I don't know if trying to change it will break something else.

When I see the body tag screwed up with multiple classes (looks like about a dozen); a mix of local and remote CSS; and load time scripting I know I am looking a load of crap that will impossible to maintain and will at some melt down into a pool odf liquid manure. You need to crap that mess and take the time to do styling that is rational and logical.

 

Can someone help me fix this? And clean up the rest of the site's code? I'll give you £10 on PayPal. I'm not great with CSS.

Also, you didn't check my site because that's not what I'm trying to do. I know how to center a simple line of text.

 

@qwikad.com, that won't put the three lists side by side as columns.

@Lucas806, like others here, I'm happy to help you to help yourself, but my professional services come considerably higher than the price of two or three coffees. If the dollars, pounds or euros are dear, you need to put the time and effort into learning to do it yourself.

g

 

No, I didn't look at your fiddle until a moment ago. The problem is that if the lists are rewritten to again (as the OP had it originally) reflect the proper structure, your solution breaks. In fact, it breaks now if a mix of link lengths alters the heights of the various lists.

g

 

Gary, I am not a pro. I am just throwing ideas around. Here's a simple working solution. If the OP doesn't want to use it, I am fine with it. It works whether the links have various lengths and/or columns have various heights. The divs can be styled of course.

http://jsfiddle.net/qPAfK/86/

<div id="footer">
    <div class="footer">
        <ul>
            <li>
                <div>Some text</div>
                <div>Some text more</div>
                <div>Some text even more</div>
                <div>Some text</div>
                <div>Some text</div>
                <div>Some text</div>
                <div>Some text</div>
            </li>
            <li>
                <div>Some text</div>
                <div>Some text more</div>
                <div>Some text even more</div>
                <div>Some text</div>
                <div>Some text</div>
            </li>
            <li>
                <div>Some text</div>
                <div>Some text more</div>
                <div>Some text even more</div>
                <div>Some text</div>
                <div>Some text</div>
            </li>
        </ul>
    </div>
</div>

Code (markup):

#footer {
    width: 100%;
}
.footer {
    text-align: center;
    display: block;
    margin: 0 auto;
}
ul {
    list-style: none;
}
li {
    vertical-align: top;
    text-align: left;
    display: inline-block;
    width: 160px;
}

Code (markup):