Logo and image on same row issue

Question

Logo and image on the same row.But padding top only the issue.Check the fiddle. http://jsfiddle.net/6Rpkh/443/

 <img class='likeordislike' src='image'><h4 class='liketext'>Twitter</h4>

The issue is the text below the image. So I want to place into the middle of the image. Padding style not working on that

score 1 · Answer 1 · edited Feb 19 '18 at 08:32

First note that your image class is likeordislike, yet your selector is likeordisklike (with an extra k), so it will never apply. You'll also want to remove the width from it (to prevent stretching), and give it a taller height.

Now that the image is sorted, the text can be vertically aligned to the middle by:

Giving it display: inline-block
Setting the height equal to the height you're trying to align with
Setting vertical-align: middle

This can be seen in the following:

img.likeordislike {
  height: 50px;
  margin-right: 4px;
}

h4.liketext {
  color: #F00;
  display: inline-block;
  height: 50px;
  vertical-align: middle;
}

<img class='likeordislike' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAjCAMAAAA3znPYAAAAXVBMVEVVrO7///9yuvHu9/36/P5st/Dm8/1br+/K5fp3vfGQyfSFw/OazvXX6/tmtPD1+v6m0/bg8PyUy/Ss1/fQ6Pq43PjE4vnF4/me0PWm1Pa93/h1vPGJxfPk8vzZ7PuSFyAkAAABYElEQVQ4jYXU67aCIBAFYIY7qKhJZZq+/2Mejzdk0Nw/WivXZ+6mCQLXKbVRtGOHK+TS8sYoQojqq9mzpl50WbEUy4xsoQUvPo6Wi/bEcoxZT0KcmV7qtUlFUm5JHFfAWMz6O73L4jIe4+ZlvnLWc0PhjzpHWiki5NJkfWouw+wowemHtXezP27z0mG8NP3XdaiX+3KeCNZqDL/OcQD08fSDxE2UD5oJNAGhsC42zTUbTPKt0P31rnvR5vjDUATbm+DhnsTArvW9zoPm/a1+Bw3+pjVx7KChu9EWjhp0uhjH6FgD636MnPJYf2z7Q3cQa7z9UQxHGtprvO7IUXP8RwypINFT9YuhZ3CmoW5Nn95BL88q3iSaSrjQ4yPBJsJBM23TGhYdeQTYq9NdY0VCiXsCYM3f5zuiconxst/6m5wfIh8Tu/ceng/j1t5KZO3r5IyOZlLWnRXKmdbL5Hze8gfIkQ1q4RZTDwAAAABJRU5ErkJggg=='>
<h4 class='liketext'>Twitter</h4>

Logo and image on same row issue

1 Answers1