Search code examples
htmlcssvertical-alignment

Force some margin-top to one of 2 inline-block elements

I have the following code which is basically an image with some text on the right, all on the same line. I would like the text to be kind of vertically centered with the image :

|
|
img   myText here
|
|

Here is my code 

img, .info {
  display: inline-block;
}
<img src="http://placehold.it/100x150">
<span class="info">
  <span>FOO</span>
  <span>BLAH</span>
</span>

I tried to apply some margin to the info class but it moves the img as well. How can I do it ?

Thanks

Solution

  • As mentioned use vertical-align to center the items vertically. Also, you have to make them inline-blocks to add a padding:

    img, .info {
  display: inline-block;
  vertical-align:middle;
}

.info {
    padding-left:32px;
}
    <img src="http://placehold.it/100x150">
<span class="info">
  <span>FOO</span>
  <span>BLAH</span>
</span>