0

I am trying to align an image with a div that contains two rows of text like this:

enter image description here

Here is my current 

<div class="first-div">
  <img class="img" src="/image-icon.png" />

  <div class="second-div">
    <p class="m-0">hello world</p>
    <p class="m-0">hello world</p>
  </div>
</div>

my current css:

.second-div {
  display: inline-block;
  margin-left: 15px;
  height: 50px;
  vertical-align: center;

}

.first-div{
  display: inline-block;
}

.img {
  vertical-align: middle;
  display: inline-block;
  margin-top: auto;
  margin-top: bottom;
  height: 50px;
  width: 50px;
}

.m-0 {
  margin: 0;
  text-align: center;
}

But i cant seem to align them without having to add a bottom margin to the picture which i assume is the wrong way of going about this.

i created a js fiddle so you guys can take a look https://jsfiddle.net/sav1bpk0/25/

enter image description here

treyBake
  • 6,440
  • 6
  • 26
  • 57
ricks
  • 3,154
  • 31
  • 51
  • 1
    I don't think this is a straight up duplicate as the OP has mostly the correct way to do it but just need a little tweaking – Huangism Jul 26 '18 at 14:21
  • 1
    https://jsfiddle.net/sav1bpk0/49/ check this out – Deepak Verma Jul 26 '18 at 14:23
  • @Huangism tweaking or not, the purpose is the same "vertical align" ... the below answer make it a clear duplicate because it's the one you will find in the 3 links I shared and more links. – Temani Afif Jul 26 '18 at 14:34

1 Answers1

3

Remove the height on the second box, also vertical-align should be set to middle like you did to the img, not center

.second-div {
  display: inline-block;
  margin-left: 15px;
  vertical-align: middle;
}

When you set a height to the second box, while the box is aligned to the image since they have the same height, but the content inside of the box is not vertically aligned.

Huangism
  • 16,278
  • 7
  • 48
  • 74