Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make two block horizontal when using inline block?

Tags:

html

css

.roles span {
  display:inline-block;
  width:80px;
}
<div class="roles">
  <img alt="test" src="images/02_button_add.png">
  <span>AlexAlexAl exAlexAlex AlexAlexAlex </span>
</div>

I am using display:inline-block; to put span text next to my img. However, the image is on the left-bottom side of my span.

How to make them horizontal?

like image 333
Dreams Avatar asked Aug 06 '15 04:08

Dreams


Video Answer


1 Answers

Use vertical-align:top to your image.

.roles img
{
    vertical-align:top;
}

Take a look at this fiddle: http://jsfiddle.net/gox5droc/

This will ensure the image will be aligned on top of the div.

like image 138
VMcreator Avatar answered Sep 30 '22 16:09

VMcreator