0

I have one problem, i wan't to add image and vertical center align image. This looks like this Link

I wan't to look like this: Link

My code:

<style>
  * {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  }

  .img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  p {
    display: inline-block;
  }
</style>

<img src="./image.jpg" class="img"> <p>Test</p>

I tried this, but is there some better way to fix this problem?

p {
    display: inline-block;
    margin-bottom: -1.76em;
  }
DumbCoder
  • 5,696
  • 3
  • 29
  • 40
Veljko Stevic
  • 25
  • 1
  • 6

1 Answers1

1

In your .img class add a vertical-align:middle; and it should do the trick.

  * {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  }

  .img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    vertical-align:middle;
  }

  p {
    display: inline-block;
  }
<img src="./image.jpg" class="img"> <p>Test</p>
David Kris
  • 799
  • 2
  • 10
  • 25