CODEWITHSUNDEEP
htmlcsshyperlinkmargincenter
Timo
Timo

Reputation: 61

Center image without link with width 100%

I want to center my Logo, but the hyperlink on it extends itself to width 100%, which perfectly makes sense because I set the margin auto.

But how can I still have my Logo centered and have the link only on the area of my image?

How it looks vs how it should look

    .logo {
      height: 50px;
      display: inline-block;
      vertical-align:middle;
      padding: 0px 10px;
    }

    @media (max-width: 600px) {
      #nav ul.desktop-nav li {
        display: none;
      }
      .logo {
        display: block;
        margin: auto;
      }
    }
<a href="#"><img class="logo" src="logo.png"></a>

Upvotes: 0

Views: 472

Answers (2)

jas7457
jas7457

Reputation: 1782

If I understand the question correctly, something like this should do the trick: Have both the logo and the logo-wrapper be inline-block (they will wrap the content, you don't want them display: block). Since they are inline-block elements they can be center aligned via the text-align property of a main wrapper around them. Resize your browser to see your breakpoint take effect.

.wrapper {
  text-align: center;
}

.logo-wrapper {
  display: inline-block;
}

.logo {
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 10px;
}

@media (min-width: 600px) {
 .wrapper {
   text-align: left;
 }
}
<div class="wrapper">
  <a class="logo-wrapper" href="#">
    <img class="logo" src="https://i.vimeocdn.com/portrait/58832_300x300">
  </a>
</div>

Upvotes: 1

Naci Burak U&#231;an
Naci Burak U&#231;an

Reputation: 11

Maybe you put layers which is you want size on the image. Then you attach the link to this layer.

Upvotes: 0

Related Questions