I have a footer positioned at the bottom of my webpage containing some text along with a few PNG images.
I am attempting to center everything within the footer. I tried using margin: 0 auto, but it didn't work due to the footer not being a block element. I also experimented with text-align: center, but that only affected the text and did not center everything in the footer.
Below is the code snippet:
<footer>
<span class="contact"> Made by me - <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8acbdabace1e898bfb5b9b1b4f6bbb7b5">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b4f5e484f7b5c565a525715585456">[email protected]</a></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;
}
Link to the fiddle for testing: fiddle
Appreciate any help! Thank you!