使锚标签中的图像居中

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://jsfiddle.net/m6e3m/

it uses:

display: table;
margin 0 auto;

I tried using:

display: block;
margin: 0 auto;
width: (?)px;

but I found it wasn't actually centering it unless I messed with the width a lot which isn't really very good as anchor tag widths seem to not work as well (imo), it was like basically using a margin-left.

Curious as to whether any of you have used this before or found an even better technique as display: table isn't supported on IE 7 and back

Answer 1

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

Answer 2

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 3

It will work out for you..

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

Answer 4

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 5

您可以在容器中添加text-align: center和vertical-align: middle;