Question

我在锚标签中有一个图像，我需要将其居中。

我已经设法使用这种技术，我刚刚在DOM检查器中弄乱了：http://jsfiddle.net/m6e3m/

它使用：

display: table;
margin 0 auto;

我尝试使用：

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

但是我发现它实际上并没有实际居中，除非我把宽度搞得很多，因为锚标签的宽度看起来效果不好（imo），这实际上并不是很好，这就像基本上使用边缘一样 - 左

对于你们之前是否曾经使用过这个或者发现一个更好的技术作为显示感到好奇：IE 7并不支持表格

Answer 1

您可以在#container上使用text-align: center;来对其中的元素进行居中。示例：http://jsfiddle.net/m6e3m/3/

Answer 2

使用所有浏览器支持的-ms-flexbox。 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

它会为你工作..

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

Answer 4

Demo Fiddle

尝试：

#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 */
}

使用上述内容，您不再需要img

的CSS

Answer 5

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

居中锚标签中的图像

5 个答案:

Demo Fiddle