Alberto Alberto - 6 months ago 16
HTML Question

center horizontally a clickable image inside a div

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

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