Search code examples
htmlcsscentering

centering text + image CSS

I have a footer at the bottom of my page with some text + a couple of png's.

I'm trying to make everything centered. When i try margin: 0 auto nothing happens. But I footer is no block element, so that makes sense. Also tried text-align: center which only would on the text, but still nothing happens.

Here's the code:

<footer>
    <span class="contact"> Made by me - <a href="mailto:[email protected]">[email protected]</a></span>
    <img src="http://i.imgur.com/M3RtrFw.png" alt="Twitter"> 
    <img src="http://i.imgur.com/NfLMXs9.png" alt="Google+"> 
    <img src="http://i.imgur.com/oLWJ205.jpg" alt="Facebook">
</footer>

CSS:

img{
    max-width: 100%;
}

img[src*="imgur"]{
    width: 30px;
    height: 30px;
    margin: 0 20px;
}

footer{
    max-width: 100%;
    position: absolute;
    top: 430px;
}


span.contact{
    font-family: 'Sunshiney', cursive;
    font-size: 1.2em;
    letter-spacing: 1px;
    text-align: center;
}

Also here is the fiddle: fiddle

Thanks!

Solution

  • Or do this with your footer:

    footer{
    width: 100%;
    text-align:center;
    position: absolute;
    top: 430px;
}

    Turn max-width to width , then text-align:center will take effect.
    JSFiddle: http://jsfiddle.net/pS5dW/6/