I'm struggling for quite some time now with that.
I have 2 floated div and I'd like to align the text with the images inside these divs.
Here is a JSFiddle
<div data-role="content" class="content">
<ul data-role="listview" data-inset="true">
<li data-icon="nf-arrow-r">
<div style="overflow:hidden;">
<div style="float:left;">
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />08h00 - 12h30
<br/>
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />13h00 - 18h00</div>
<div style="float:right;font-weight:normal;color:blue;">9h30 +
<img src='https://si0.twimg.com/profile_images/378800000050266964/cfbc5ac04a7ced31fcbb9dfcf1649d65.png' width='32' height='32' />
</div>
</div>
</li>
</ul>
</div>
You can solve this issue by
Wrapping the text content inside a <span> tag.
And then by adding vertical-align: bottom; to your <span> and <img> tags.
HTML:
<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' /><span>08h00 - 12h30</span>
CSS:
img, span{
vertical-align: bottom;
}
Working Sample
Note: The working sample has border just to illustrate.
A simple solution would be using table and table-cell displays. I've colored the cells so it'll be clear.
jsFiddle Demo
I had to change some styles, but not the DOM.
<div style="font-weight:normal;color:blue;background:red;
vertical-align: middle; display: table-cell;
height:100%; text-align:right;">
Add this in all image tags.
style='vertical-align:middle;'
Demo
Related
I'd like to align all 3 lines of text to the right of my image. Currently it wraps on the 2nd line.
How do I do this?
http://jsfiddle.net/bhu4p04r/
CSS:
img {
min-width:75px;
height:90px;
vertical-align:middle;
margin-right:30px
}
HTML:
<div class="medium-12 columns"><img src="http://placekitten.com/g/75/90" />1<br />2<br />3</div>
Wrap your text in a div, and make image float:left.
<div class="medium-12 columns">
<img src="http://placekitten.com/g/75/90" class="left" />
<div class="right">1
<br />2
<br />3</div>
</div>
DEMO here.
Vertically middle text:
Give display:inline-block; to image and the text container.
img, .text {
display:inline-block;
vertical-align:middle
}
See DEMO here.
float: left on your image is the way to go.
http://jsfiddle.net/bhu4p04r/2/
Or another alternative (to keep the text centered)
http://jsfiddle.net/Lbbt1uy8/
What is important to know is that vertical-align uses line-height not height to center something vertically.
Try to use <p> elements instead of </br> on your text and add align attribute to your image like this:
<div class="medium-12 columns"><img src="http://placekitten.com/g/75/90" align="left"/><p>1</p><p>2</p><p>3</p></div>
Here fiddle
you had lots errors on the syntax
and you should wrap each element and assign them with separate CSS codes
HTML:
<div class="medium-12 columns">
<img src="http://placekitten.com/g/75/90"></img>
</div>
<div id="txt">
1<br>2<br>3<br>
</div>
and CSS
.medium-12 {
min-width:75px;
height:90px;
margin-right:30px;
float: left;
display: block;
}
#txt {
float: left;
display: block;
margin-top: 0;
}
At the moment, what I have is seen in the first picture. I would like to know how can I add the spaces (bottom margin?) between the images as shown in picture 2? They 2 side-by-side blocks are 2 different DIVs, and the pictures in each line are elements of the same div, so bottom-margin doesn't work. (CODE AT THE BOTTOM)
Picture 1:
Picture 2:
HTML:
...
<div class="meniu">
NAUJIENOS
KREPSINIO VADOVAS
TRENIRUOTES
IDOMYBES
GALERIJA
APIE MUS
</div>
<div class="rightbar">
<div class="rightpic2">
<img src="pic3.png"> <br>
<img src="pic4.png"> <br>
<img src="pic4.png"> <br>
<img src="pic5.png"> <br>
<img src="pic3.png">
</div>
</div>
<div class="rightpic1">
<img src="pic1.jpg"> <br>
<img src="pic2.jpg">
</div>
...
CSS:
.rightpic1{
float:right;
margin-right:30px;
margin-top:100px;
}
.rightpic2{
margin-right:24px;
margin-left:24px;
margin-top:38px;
}
.rightbar{
float:right;
background-color:white;
margin-top:62px;
}
<a> elements display inline. Nix all the <br> in the markup and add display: block to the css.
.rightpic1 a, .rightpic2 a {
display: block;
margin-top: 15px
}
First of all, you need to close all your image tags. Then add display:block; to the links inside your .rightpick1 & .rightpick2 classes. Then, you can successfully add a margin-bottom to your links.
I attached a fiddle as an example. Hope that helps!
What I like to do is to use a DIV's vs. Table.
I like to show an image and to the right of that image show text. The text should be aligned to the top edge of the image. There should be some spacing between the text the image.
I have the following code but seems like the image comes and then the text comes below it:
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="clear:left"></div>
<div style="float:left">
%#Eval("title")
</div>
<div style="clear:left"></div>
You could use a float/overflow trick:
<div class="imgCont">
<img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">
%#Eval("title")
</div>
I used classes instead of inline styling:
.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}
JSFiddle
You just need to remove the first
<div style="clear:left"></div>
HTML :
<div id="wrapper">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
<div>image</div>
</div>
CSS :
#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */
I don't understand why you have this 2 divs:
<div style="clear:left"></div>
They just prevent your text div and your image div to be on the same row. Css property "clear" make your container to NEVER have another container floating, here on his left.
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="float:left">
%#Eval("title")
</div>
It would be enough
Here is the answer!
Obviously use div. Here is a simple example!
You can first create a parent div then inside that parent div, you can create 2 divs like
<div>
<div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
<div class="float-right">The text that would flow at the right side..</div>
</div>
Here is the CSS for that.
You will be displaying them inline! I mean one div on left other on right!
You will be displaying the text on the top corner! Which means no margin-top for the text div.
Here is the CSS code:
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-left, .float-right {
display: inline; // use inline-block if you want to add padding or margins..
}
This way, the div with the image will align to the left and the other div will be placed to the right side! And they both will be in a line. As you want them to be.
Good luck, cheers! :)
In my code a strange space is rendered in between two inner most divs in the following html structure
<body>
<div class='DatePicker'>
<div id="dayDiv" class='DayDiv' style='background-color:blue'>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div>
</div>
</div>
</body>
The innermost divs are rendered but with space in between of them and I want to remove that.
Following is the JSFiddle link to see the page with styles-sheet.
Note: Margin, border and padding is 0 for all the elements
Remove the white space between the divs and it goes away
<div class='DatePicker'>
<div id="dayDiv" class='DayDiv' style='background-color:blue'>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div><div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div>
</div>
</div>
jsFiddle example or jsFiddle example (uses HTML comments)
All above answers are correct, you got spaces between divs because there is a space in your markup.
You can fight this behaviour in several ways:
Remove spaces in markup
Sticking together the closing </div> with the next <div>
<div class='DatePicker'>
<div id="dayDiv" class='DayDiv' style='background-color:blue'>
<div class="" style='[all your styles]'>
Your content...</div><div class="" style='[all your styles]'>
Your content...</div>
</div>
</div>
Use negative margins
I don't recommend this way because you really don't know exactly how many pixels you need to reduce. The space is one character width. Often, it counts 3px or 4px, but... is unsure.
<div class="" style=' /*New style*/ margin-left:-4px; /*End new style*/ display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top;'>
Set width of the font to "0"
If you are using em instead of px, you could avoid this method. It can give you troubles in child elements, and extra markup.
<div class="" style=' /*New style*/ font-size:0; /*End new style*/ display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top;'>
<div style="font-size:12px;">Your content...</div>
</div>
Float the div
Instead of use display:inline-block; you could use float:left;. This method probably requires to you the use of a clearfix method.
I retrive the info from CSS Tricks. You could get more info there.
Hope this helps!
I know this is weird, but in HTML if you have empty lines between elements it creates a space there. Remove the empty lines to make the space magically disappear.
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div><div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>
</div>
There was a space...
<body>
<div class='DatePicker'>
<div id="dayDiv" class='DayDiv' style='background-color:blue'>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'></div>
<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'></div>
</div>
</div>
</body>
Do you want to get rid of the space?
Add float: left to your divs.
I have a div with <img> and <a> in it.
But I have problem to align them vertically middle. I have tried to use floats, absolute positioning and other stuff but nothing has effect.
<div id="hoverDiv">
<img alt="" width="32px" height="32px" src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776868.png" />
TestAccount
<div class="showme">
<ul id="menuAccountItemList">
<li>...
</ul>
</div>
</div>
img {
vertical-align:middle;
}
Here's a jsFiddle example (border added to show alignment).