Karolina Ticha
Karolina Ticha

Reputation: 531

How to perfectly center image with elements

How can I make img or element with image background same height, padding and margin as other links?

Here is my code

  a   {
      display: inline-block;
      padding: 1%;
      border: 1px solid black;
      color: black;
      font-size: 15px;
    }
    a img {
      height: 15px;
      border: 1px solid red;
    }
    .backg {
      display: inline-block;
      padding: 1%;
      border: 1px solid red;
      color: black;
      background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
      background-size: 100%;

    }

here is codepen http://codepen.io/anon/pen/ZQRyOd?editors=1100

Upvotes: 1

Views: 41

Answers (2)

emattiazzi
emattiazzi

Reputation: 376

I am not sure that I understood the question but you can add vertical-align: middle; to .backg and a img

Upvotes: 1

Amir Hoseinian
Amir Hoseinian

Reputation: 2352

In my opinion if you don't care about older browser you should use flexbox Here is a decent guide for doing so:

A Complete Guide to Flexbox

Upvotes: 0

Related Questions