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 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/
vertical-align:bottom WITH float:left
Vertical align only works with inline block elements, floated elements ignore the vertical align property.
Update the box class with the following:
.box {
display: inline-block;
vertical-align: bottom;
width:80px;
}
I would make them all inline block elements and remove the whitespace with one of these techniques.
Updated fiddle: http://jsfiddle.net/9rcnLb8n/
Alternatively you could use flexbox with the align-self: flex-end;
property.
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;
}
CSS vertical align puzzle with float right and variable line height
I upgraded your code, works fine with any number of rows (without tables).
http://jsbin.com/dufesexabu/1/edit?html,css,output
Spans vertical align with float
You can use display: inline-block;
along with vertical-align: middle;
on your <span>
elements instead of float. This way they are positioned next to each other too and you can apply the vertical alignment:
.container span { display: inline-block; vertical-align: middle;}.text-1 { padding-right: 10px;}.bar { background-color: lightblue; border-radius: 5px; height: 5px; width: 150px;}.text-2 { padding-left: 10px;}
<div class="container"> <span class="text-1">Text 1</span> <span class="bar"> </span> <span class="text-2">Text 2</span></div>
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>
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>
Why is vertical-align: middle not working on my span or div?
Using CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
use "justify-content: center;" to align elements horizontally
Note: This might not work in old IE's
Related Topics
Bad Value X-Ua-Compatible for Attribute Http-Equiv on Element Meta
Inline Style to Act as: Hover in CSS
HTML Embed Autoplay="False", But Still Plays Automatically
CSS: Unexpected Vertical Position of "Inline-Block" Elements
Convert Svg Path Data to 0-1 Range to Use as Clippath with Objectboundingbox
HTML/CSS Set Div to Height of Sibling
What Happens If The Action Field in a <Form> Has Parameters
Flex Elements Ignore Percent Padding in Firefox
How to Define a Dynamic Mixin or Function Name in Sass
Bootstrap - Fill Fluid Container Between Header and Footer
How Is HTML5 Webstorage Data Physically Stored
How to Horizontal & Vertical Center a Div
Why Does Chrome 80 Cause This Grid-Template-Rows: Auto Problem
Avoiding Repeated Constants in CSS
While Display Image Crop Top and Bottom of Image Using CSS