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;
}
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?
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
add following styles to text div
height:3.8cm;
line-height:3.8cm;
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
Related
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
So I have the above image with a text next to it. The thing is that I want the text next to it to appear not on the bottom right but at the middle right/ top right of the image with some space between the image and text. How can I achieve it?
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' style='vertical-align:middle' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
Solved it by adding vertial-align:middle !
You can use position absolute on the text and then align the text anywhere you want using the top property.
Example:
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="display:inline; position:absolute;">
Twin Peaks
</div>
</div>
You can achieve it by using flex in the parent. Just set align-items: center
<div style="display: flex; align-items: center;">
<div>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="margin-left: 10px;">
Twin Peaks
</div>
</div>
<div>
<div style="float: left;">
<img src="https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg" height="300px" />
</div>
<div style="float: left; margin-left: 10px;">
Twin Peaks
</div>
</div>
It'll set your Text top right side of your image.
How do I format my CSS so that the text inside "header-right" should be aligned at the bottom while my image at "header-left" is aligned at the top?
Here's my html:
<div class="container">
<div class="header-left;">
<img src="img1.png">
</div>
<div class="header-right;">
<div style="float:left;">
This text should be at the bottom.
</div>
<div style="float:left;">
This text should be at the bottom also.
</div>
</div>
</div>
Thanks.:)
From your class-naming I suppose you want both texts to the right of the image, bottom-aligned with the image?
To achieve this, apply display: inline-block to all DIVs , in addition apply display: block; to the image to avoid any space at its bottom:
.header-left,
.header-right,
.header-right div {
display: inline-block;
}
.header-left img {
display: block;
}
<div class="container">
<div class="header-left">
<img src="http://placehold.it/80x120">
</div>
<div class="header-right">
<div>
This text should be at the bottom.
</div>
<div>
This text should be at the bottom also.
</div>
</div>
</div>
BTW: Don't use a semicolon in class="header-right" (inside your DIV-tags) and similar.
You can displat the .container as a table and the .header-right and .header-left as table cells. This way, you can align the contents vertical bottom (or even top or middle)
See snippet below
.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}
<div class="container">
<div class="header-left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSYTogPdYlS2zHfImUPfjdkO1v0793TjQMD2qjLoY7qNkqCUN_-dA">
</div>
<div class="header-right">
<div style="">
This text should be at the bottom.
</div>
<div style="">
This text should be at the bottom also.
</div>
</div>
</div>
I would like to align some icons and some text in a nice grid like fashion.
The text needs to be centerd under the second icon.
It would have to look like this.
____ ____ ____
| | | | | |
|ICON| |ICON| |ICON|
|____| |____| |____|
TEXT
Is there any easy way to achieve this?
create a row div and give it 100% width and float left and inside this div create 3 div as a col div and give each 33% and float left and place your icon inside these div..now create another row width 100% float left now place p tag inside it and style this p tag text-align:center now you will see your text always below 2nd icon img....
<div style="width:100%;float:left;">
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
</div>
<div style="width:100%;float:left;">
<p style="text-align:center;"> You Text Here..</p>
</div>
Create a class that controls the size of each of the areas that hold your icons. As a sample i just used px but if you want it responsive then i would suggest that you use %. With a holder for each icon you can easily add text below, this will then stay nicely aligned.
Sample code snippet:
.pull-left {
float: left;
}
.icon-box {
width: 100px;
text-align: center;
}
.icon {
width: 60px;
height: 60px;
border: 1px solid;
margin: 0 auto;
display: block;
}
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
<p>Text</p>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
you can do it quite easily. You need to use list item & display inline with text center property. Like below code -
HTML portion
<div id="test1">
<ul>
<li>
<img src="" alt="num1">
</li>
<li>
<img src="" alt="num2">
<br/>
121
</li>
<li><img src="" alt="num3"></li>
</ul>
</div>
CSS for it
#test1 ul li {
display: inline;
list-style: none;
float: left;
padding: 0;
text-align:center;
}
Have you heard from bootstrap 3 ? It has a lot of features that help you with responsive alignment.
An example of this would be :
<div class="row">
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
</div>
One way I could think of is to create 3 container (for example 3 divs) with a css property on width (let say 33% width each, or something smaller if you need to add margin (you could even use px not %, but I recommand % for responsivness) with a float left property. Those divs will contain the icons, then you create another 3 icons with the same propreties that will display under the icons. Now you just have to put the text in the center one with text align center and that's it. You gave us few informations so I can't help you better than this.
Here you have an example of what I meant, you just need to implement it by your needs.
html:
<div class="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="text_empty"></div>
<div class="text"></div>
<div class="text_empty"></div>
css:
.container {width: 100%;}
.icon {width:33%; float: left; }
.text_empty {width:33%; float: left; }
.text {width:33%; float: left; text-align:center; }
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
I have this html:
<div id='calendarControlPane'>
<div id='calendarControl'>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
</div>
</div>
I'm using "display:inline-block" on container divs because I want those divs to fit the size of their contents.
The problem I have is that they are drawn next to each other and need to be drawn below each other.
Well, depending upon your actual final application, using a float can work (see fiddle), though older versions of IE can choke on it:
HTML
<div id="calendarControlPane">
<div id="calendarControl">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</div>
CSS
#calendarControl > div {
float: left;
clear: left;
border: 1px solid black;
}
#calendarControl > div > div {
width: 14px;
height: 15px;
}
Oldschool fix:
<div id='calendarControlPane'">
<div id='calendarControl'">
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div>
</div>
</div>
Simply add a
<br />
after each div containing the inline-block class.
You're not really asking a question here, and the two bottom lines of your post are a bit hard to understand, but are you sure you don't want display: block instead?
edit: As drublic said, this is the default display value for divs, so you shouldn't need that style at all.