Menu
I'm trying to print an image and text consecutively with two divs.
I have gained this output so far:
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;
}
qr code. so i can't use table methoddiv using in foreach method. so cant change the dimension. how can i? 
211
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="http://i.stack.imgur.com/25Rl3.jpg" style="height:3.8cm;">
</div>
<div style="display:inline-block;vertical-align: middle;">
sample text
</div>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;
}
<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
30
add following styles to text div
height:3.8cm;
line-height:3.8cm;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
