Question

我在板子周围看了一下，找不到任何对我有用的东西，但基本上当我将一个带有锚标签的图像居中时，可链接区域填满整个宽度div，即使指定宽度。如何才能获得仅在图像周围的链接？

HTML

        <div id="right">

        <div id="content">

            <div class="title">
                <h3>Spawn</h3>
                <a href="index.html"><p>&lt;&lt; Go Back</p></a>
            </div>

            <a href="images/spawn.png" data-lightbox="inks" title="Spawn"><img src="images/spawnThumb.png" /></a>
            <p class="description">Spawn</p>

        </div><!-- END content -->

    </div><!-- END right -->

CSS

    #content img {
    display: block;
    margin: 0 auto;
    width: 400px;
}

.title {
    border-bottom: thin solid #316b9c;
    margin-bottom: 20px;
}

.title a {
    font-size: 12px;
    color: #bcbdbf;
}

.title a:hover {
    color: #316b9c;
}

.title a:active {
    color: #000;
}

.topImage {
    margin-bottom: 10px;
}

p {
    color: #bcbdbf;
}

Answer 1

只需将#content a添加到#content img CSS即可。

#content img,
#content a{
     display: block;
     margin: 0 auto;
     width: 400px;
}

http://jsfiddle.net/jJ4hv/2/

Answer 2

您可以申请

display: table;
margin: auto

到图像周围的[a]标签。

Answer 3

我通过向 a 标签添加 text-align: center 解决了同样的问题！

#content a {
     text-align: center;
}

链接大于图像

3 个答案: