使图像中心没有显示块

Question

我的HTML：

<p>
    <a href="#">
        <img src="image.png" />
    </a>
</p>

<p>Some text</p>

我想将图像移动到中心而不会阻挡它。使用块链接可以在所有宽度上单击。

尝试：

img{
    margin:0 auto;
    display:inline-block;
}

但它不起作用。

Fiddle

Fiddle with centered image but wrong link

图像宽度可以不同。

知道如何制作图像中心并仅在图像上留下可点击区域吗？

Answer 1

试试这个

<p id="imgPara">
    <a href="#">
        <img id="image" src="http://httpd.apache.org/docs/current/images/feather.gif" />
    </a>
</p>
<p>Some text</p>

#imgPara{
text-align: center;
}

http://jsfiddle.net/Shashi0812/YAusb/

Answer 2

您可以为a代码设置此CSS：

a{
  margin:0 auto;
  display:table;
}

演示 http://jsfiddle.net/9653Y/4/

Answer 3

将img的父级与中心对齐。

HTML：

<p class="center">
    <a href="#">
        <img src="http://httpd.apache.org/docs/current/images/feather.gif" />
    </a>
</p>

CSS：

.center{text-align:center;}

Here is the updated fiddle.

Answer 4

将保证金变更为50％

 img{
        margin:0 50%;
        display:inline-block;
    }