Question

我们如何在div中水平居中我们想要点击的图像？

HTML：

<div class="logo-wrap">
    <img class="logo" src="img/logo.png" width="262" height="53" />
</div>

CSS：

.logo-wrap{
    text-align: center;
}
img.logo {
    margin-left: auto;
    margin-right: auto;
}

我需要在某处放置“a”标签并给它一个合适的CSS。有什么想法吗？

Answer 1

好吧，只需在它周围添加一个Anchor-Tag：

<div class="logo-wrap">
    <a href="#">
        <img class="logo" src="img/logo.png" width="262" height="53" />
    </a>
</div>

JSFiddle

Answer 2

<div class="logo-wrap">
   <a href="http://www.facebook.com"><img src="img/logo.png" width="262" height="53"   /></a>
</div>

Answer 3

我个人的偏好是用css提供更多控制来管理它。

DEMO

<强> HTML

<div class="logo-wrap">
    <a class="logo"/>
</div>

<强> CSS

.logo-wrap{
    text-align: center;
}
.logo {
    background:#68c url('img/logo.png') no-repeat center center;
    margin:0 auto;
    height:53px;
    width:262px;
    display:block;
    cursor:pointer;
}

Answer 4

HTML

<div class="logo-wrap">
    <a href="#">
        <img class="logo" src="img/logo.png" />
    </a>
</div>

CSS

.logo-wrap{
     width:100%;
}
.logo{
    width:50%;
    display:block;
    margin:0 auto;
}

Answer 5

试试这个：

img.logo {
    vertical-align: middle
}

水平居中div内的可点击图像

5 个答案:

DEMO