Correct CSS to replace img align element

Question

In the footer of my page http://www.imbued.co.uk/ I am getting errors on the W3C compliance test, understandably, as I've used the align attribute inline to vertically align the social media icons with its corresponding text. What is the correct CSS alternative to use? If I remove the align attribute the text and image aren't both in the centre and there is no centred float obviously.

Answer 1

There's a few options. The best probably is to set the style on those elements to use margin: auto;

margin-left: 50%;
margin-right: 50%;
margin: auto;

In the case of one of your images, for example, it would look something like this:

<img style='margin-left: 50%; margin-right: 50%; margin: auto;' src=... />

Of course, you should just put the css in a class and set the class of anything you want centered to that class. The css class would look like:

.centered {
    margin-left: 50%;
    margin-right: 50%;
    margin: auto;
}

Answer 2

align translates best to css text-align

so

<div align="left">text</div>

becomes

<div class="left">text</div>

and in css:

.left {
text-align:left;
}