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

Question

How do we center horizontally inside a div an image that we want to be clickable?

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;
}

I need to put the "a" tag somewhere and give it a proper CSS. Any idea?

Answer 1

Well, just add an Anchor-Tag around it:

<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

My personal preference is to manage it all with css providing more control.

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

Try this:

img.logo {
    vertical-align: middle
}