Centering an image that is in an anchor tag

Question

I have an image in an anchor tag, and I need to center it.

I have managed to do so using this technique that I just came across messing about in the DOM inspector: http:

Answer 1

It will work out for you..

.center
{
width: 100%;
display:block
text-align: center;
}

Answer 2

You can use text-align: center; on the #container to center elements within it. Example here: http://jsfiddle.net/m6e3m/3/

Answer 3

Demo Fiddle

Try:

#container{
    width: 600px;
    height:600px;
    background: red;
    display: table-cell; /* <-- allows use of vertical align */
    text-align:center; /* <-- horizontal centering */
    vertical-align:middle; /* <-- vertical centering */
}

Use the above and you wont need any more CSS for the img

Answer 4

use -ms-flexbox supported by all browser. DEMO

#container{
    width: 600px;
    height:600px;
    background: red;
}

.centre{ 
height: 100%;
    width:100%;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center; 
}

Answer 5

you can add to container text-align: center and vertical-align: middle;