CSS vertically align floating divs
You'll have no luck with floated elements. They don't obey vertical-align
.
You need display:inline-block
instead.
http://cssdesk.com/2VMg8
Beware!
Be careful with display: inline-block;
as it interprets the white-space between the elements as real white-space. It does not ignores it like display: block
does.
I recommend this:
Set the font-size
of the containing element to 0
(zero) and reset the font-size
to your needed value in the elements like so
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
See a demonstration here: http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
Vertically center content of floating div
The others are right, you need to nest two DOM elements which gives you more options controlling the centering. Here's the code:
.floating { display: table; float: right; height: 200px; width: 400px; border: 1px solid red;}.floating p { display: table-cell; vertical-align: middle; text-align: center;}
<div class="floating"> <p>This is the proper way that validates and breaks across multiple lines, if the text is longer than just a few words and still should be vertically centered. Here, it's also horizontally centered for added joy.</p></div>
Vertically align 2 floating divs with flexible height
Here's how you could make it flexible (no fixed heights, just keep those .column containers vertically centered regardless of their content): set .column to display:inline-block and to vertical-align: middle inside your table-cell .wrap div.
.column {
display: inline-block;
width: 45%;
height: auto;
text-align: center;
border: 1px solid black;
vertical-align: middle;
}
http://jsfiddle.net/VLRpc/2/
Why doesn't vertical-align work properly when using float in CSS?
You need to set line-height.
<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>
http://jsfiddle.net/VBR5J/
Vertically center a floating div
You can use position absolute (with left / right depending on what floats you need)
.selector{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
http://codepen.io/sebastianekstrom/pen/kzEhe
How to vertically middle-align floating elements of unknown heights?
You can't do this directly, because floats are aligned to the top:
If there is a line box, the outer top of the floated box is aligned
with the top of the current line box.
The exact rules say (emphasis mine):
- A floating box's outer top may not be higher than the top of its containing block.
- The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an
element earlier in the source document.- The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an
element earlier in the source document.
- A floating box must be placed as high as possible.
That said, you can take advantage of rule #4:
- Place each float inside inline-level elements that establish a new block formatting context /BFC), e.g.
display: inline-block
. - These wrappers will contain the floats because they establish a BFC, and will be one next to the other because they are inline-level.
- Use
vertical-align
to align these wrapper vertically.
Be aware that some space might appear between the inline-block wrappers. See How to remove the space between inline-block elements? to fix it.
.float-left { float: left;}
.float-right { float: right;}
#main { border: 1px solid blue; margin: 0 auto; width: 500px;}
/* Float wrappers */#main > div { display: inline-block; vertical-align: middle; width: 50%;}
<div id="main"> <div> <div class="float-left"> <p>AAA</p> </div> </div> <div> <div class="float-right"> <p>BBB</p> <p>BBB</p> </div> </div></div>
How to vertically align floating divs to the bottom?
This will do the trick:
#bars {
display: table-cell;
border: solid 1px black;
}
#bars > div {
display: inline-block;
vertical-align: bottom;
width: 5px;
background-color: #999;
margin-left: 2px;
}
#bars > div:first-child {
margin-left: 0;
}
It uses display: table-cell;
on the parent div, which by default has vertical-align: baseline;
applied. This changes the need for float: left;
on the child divs and allows us to use display: inline-block;
. This also removes the need for your CSS clear fix.
EDIT - Per @thirtydot's comments, adding vertical-align: bottom;
to the child divs removes the gap at the bottom.
Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell;
so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!
Vertically middle align floated contents
If you add
display: flex;
align-items: center;
to .main
class, it should work.
.main { height: 85px; background-color: #f00; /*position: absolute;*/ /*top: 2rem;*/ display: flex; align-items: center;}
.child_1,.child_2 { float: left; width: 8rem;}
<div class="main"> <div style="display: inline-block;vertical-align: middle;"> <div class="child_1"> Some long text is put here </div> </div> <div style="display: inline-block;vertical-align: middle;"> <div class="child_2"> 22 </div> </div></div>
Vertically center 2 floating divs
There is a really cleaver answer to this at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ It suggests this code:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
There are other solutions to this problem also, but this is the most simple. You can then just float each box left or right.
EDIT: another link with a lot of ways of doing this http://css-tricks.com/centering-css-complete-guide/
Related Topics
Parallax Scrolling with CSS Only
Is There a Web Service for Converting HTML to Pdf
Draw Single Pixel Line in HTML5 Canvas
How to Select Every Other Div Class Element Using Just CSS (No Js)
CSS Right Margin Does Not Work Inside a Div with Overflow Scroll
Equal Height Columns with Centered Content in Flexbox
Extracting Data Between Two Tags in HTML File
Fire Event When Vimeo Video Stops Playing
Placing an Image to The Top Right Corner - CSS
Styling The Placeholder in a Textfield
Making a Div Fit The Initial Screen
How to Force Horizontal Scrolling in an HTML List Using CSS
Setting a Div's Height in HTML with CSS
Aligning Elements Left, Center and Right in Flexbox
CSS Attribute Selector for Input Type="Button" Not Working on Ie7