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;
}
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/
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>
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/
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!
How to get float:right button to vertically align in the middle
The cleanest way to do that is to use flex
like this:
Add
display: flex
to your outer divpanel-footer
[Check code below]Remove the float and use
text-align:right
on the span for the button. [Check code below]Add
align-self: center
to the inner span. [Check code below]
For 1:
.panel-footer {
height: 70px;
border: solid;
display:flex;
}
For 2:
.header-footer-item {
text-align: right;
}
For 3:
.header-footer-item {
align-self: center;
}
jsFiddle: https://jsfiddle.net/d1vrqkn9/4/
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
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 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>
Related Topics
How to Override CSS Set on a Pseudo Element
Why Does Transform-Origin-Z Distort on Safari, iOS
What Is the Regex of a CSS Selector
:Empty Selector Not Working in CSS
How to Style a List of Checkboxes
What Is the Use Case of :Host-Context Selector in Angular
Relative Parent, Absolute Positioning Vertically by Percentage
ASP.NET MVC CSSrewriteurltransform Multiple Arguments
Change Svg Viewbox Size with CSS
Position a Div Container on the Right Side
Changing Spacing Between Paragraphs and Inside of Paragraphs
How to Customize Style of Bootstrap $Modal
Css3 Scale Transform on Parent Div But Keeping Constant Size in Some of the Associated Divs
Hover One Element, and Change Another (Without Using JavaScript)