6

I'm trying to print an image and text consecutively with two divs.

I have gained this output so far:

enter image description here sample text

But I need to display the text in the middle after the image, not at bottom.

HTML

<body>
    <div id="qr" style="display:inline-block; min-width:2.2cm; height:3.8cm; align: center;" >
        [ image_url  ]
    </div>
    <div style="display:inline-block; min-width:3.8cm;">
        sample text
    </div>
</body>

CSS

body{
    width:21.1cm;
    height:29.8cm;
    background-color: white;
    margin-top:0.4cm;
}
  • the image is qr code. so i can't use table method
  • the div using in foreach method. so cant change the dimension. how can i?
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
m2j
  • 1,152
  • 5
  • 18
  • 43

5 Answers5

16

Are you after something like this:

<div id="qr" style="display:inline-block; min-width:2.2cm; height:3.8cm; align: center;vertical-align: middle;" >
  <img src="https://i.stack.imgur.com/25Rl3.jpg" style="height:3.8cm;">
</div>
<div style="display:inline-block;vertical-align: middle;">
  sample text
</div>
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
  • saved my days. thanks. but, is it possible to align the text place manually? – m2j Jan 30 '16 at 12:59
  • 1
    u r welcome. wat do u mean by manually? If you think this is not the exact desired output, please invest some time and edit your question to fulfill the desired output and let people edit or add new answers for that – Peyman Mohamadpour Jan 30 '16 at 13:07
4

My way of doing this:

By using flex:

<div class="one">
    <div>
        <img src="http://placehold.it/300x150" />
    </div>
    <div>
        sample text
    </div>
</div>

CSS: 

.one {
    display: flex;
    align-items: center;
}
Basel Issmail
  • 3,847
  • 7
  • 20
  • 36
Jitesh Narula
  • 386
  • 3
  • 7
3
<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>

OR

<div>
    <img style="float: left; margin: ...;" ... />
    <p style="float: right;">Text goes here...</p>
</div>

See this post or

W3Schools

Community
  • 1
  • 1
Dirk Jan
  • 2,355
  • 3
  • 20
  • 38
3

add following styles to text div

height:3.8cm;
line-height:3.8cm;
Amir Hoseinian
  • 2,312
  • 2
  • 24
  • 27
0

This works for my project, i have many images and dont like too many divs, and less code:

<div class="test">
<img src="http://placehold.it/300x150"><span>sample text</span>
</div>

.test img {height:50px;width:auto;margin-bottom:-20px}

jsfiddle.net

jzuhri
  • 812
  • 7
  • 8