What is the way to place the two divs on the exact same line?

Question

I used two divs... One for displaying images.... One for displaying text...

With the first div, I set background-image property for setting background-image... And of course set the display property as an inline... But the thing is they are on the same line, but not exactly the same line...

    <div class="div_with_image"></div>
    <div style="display:inline">Text</div>

this is css file

.div_with_image{
  background-image: url(../beacon/images/icon-plus.png);
  width: 16px;
  height: 16px;
  cursor: pointer;
  display: inline-block; 
}

But image shows up like slightly upper than the text... and I can't solve it out... I need your help... Thanks, Zac.

What is your text font-size? I would recommend putting both divs in one div and set the vertical align. — Ms. Nobody, Jun 14 '13 at 08:29
Do you like to use one div for setting the background for the text in the other div? — Karl Adler, Jun 14 '13 at 08:31

joshua · Accepted Answer · 2013-06-14T09:15:21.410

3

that is due to line-height. If you add height to an element where exactly does the text inside of it lie? That is,

if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up?

Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space.

But you can overcome that by using a line-height value the same height as the container, this way the text will take in the vertical-align property and align itself properly

Courtesy: Andres Ilich

edited Jun 14 '13 at 09:15

answered Jun 14 '13 at 08:26

joshua

2,373
2
26
54

You were totally right there. Great! Maybe I have to come up to you next time!!! – Nicholas Jun 14 '13 at 08:57

score 1 · Answer 2 · answered Jun 14 '13 at 08:23

Why dont you just use float on both?

Html code:

<div class="div_with_image"></div>
<div style="float:left;">Text</div>

Css code:

.div_with_image{
  background-image: url(../beacon/images/icon-plus.png);
  width: 16px;
  height: 16px;
  cursor: pointer;
  float:left;
}

score 0 · Answer 3 · edited May 23 '17 at 12:28

Have you tried to float the elements instead of using inline-block?

If you insist on inline-block, sometimes the end-start tags need to be on the same line:

<div class="div_with_image"></div><div
    style="display:inline">Text</div>

Ugly, and I'm trying to find the question with a million upvotes that addresses this (this one?), but sometimes necessary. I think comments work too, if I recall.

score 0 · Answer 4 · answered Jun 14 '13 at 08:29

0

you can try adding style="float:left" to both divs.

answered Jun 14 '13 at 08:29

Ganesh Bora

1,073
8
16

score 0 · Answer 5 · answered Jun 14 '13 at 08:38

0

use float:left

<div class="div_with_image"></div>
    <div style="float:left">Text</div>

DEMO

answered Jun 14 '13 at 08:38

Aravind30790

814
9
21

What is the way to place the two divs on the exact same line?

5 Answers5