A href tag takes up the whole div

I wanted to create a link for my logo in the footer, I centered the logo via display:block and margin: 0 auto, but when I did so, the a href tag took up the whole footer, like I set the width to 100% or something.

Here's the css sample

#footer{
height:60px;
position:absolute;
background-color:white;
bottom:0;
width:100%;
left:0;
}

#logo{
text-align:center;
width:50px;
height:auto; 
bottom:0px;
padding-top:10px;
display:block;
margin: 0 auto;
position:relative;
}

HTML(JADE Template Engine was used)

 div#footer  
    a#gitlink(href='https://github.com/ZippoRays/slatkatajnamk2')
        img#logo(src='randomimg') 

Upvotes: 1

Views: 3146

Answers (1)

fnune
fnune

Reputation: 5534

Change your CSS to something like this:

https://jsfiddle.net/0fqvf9oe/

I.e. give your anchor the display:block; property and not the image:

#footer a {
    display:block;
    ...
}

Upvotes: 3

Related Questions