Why doesn't vertical-align work properly when using float in CSS?

Question

How can I use the vertical-align as well as float in the div properties? The vertical-align works fine if I do not use the float. But if I use the float, then it does not work. It is important for me to use the float:right for the last div.

I am trying following, if you remove the float from all div's then it would work fine:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

score 89 · Accepted Answer · answered Jun 14 '13 at 07:26

89

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/

answered Jun 14 '13 at 07:26

Anders B

3,343
1
26
17

33

if you set `line-height` with same value for all elements the `vertical-align` is useless. (http://jsfiddle.net/VBR5J/448/) – Éderson T. Szlachta May 11 '15 at 14:17
Does not work for ` – Green Sep 01 '15 at 07:26
17

This answer is wrong. vertical-align belongs on the CONTAINER (the `div`) not the individual elements. The correct solution -- capable of vertical-aligning floated elements -- is to put both `vertical-align` and `line-height` on the CONTAINER: `
`. REMOVE `vertical-align:middle; line-height: 38px;` from the span styles.
– ToolmakerSteve May 14 '16 at 00:08
1

Just discovered that what I suggest works for the floated spans in the answer's fiddle, but not for some elements (failed for a floated radio input). – ToolmakerSteve May 14 '16 at 00:18
@ToolmakerSteve is right, but I understand why nobody gets it. You can do so many things with CSS per element and you've got so many ways to do it. It's hard to image that you'd set up a container to make it's children behave the way you want instead of the other way around. – DerpyNerd Sep 27 '16 at 11:18
2

@ToolmakerSteve is wrong, and this answer is wrong. Vertical-align only applies to inline elements, inline blocks or table cells (the latter is just weird). Adding a 'float' makes en element a block element. Still, using line-height (and ignoring vertical-align) can be a solution. – commonpike Mar 21 '18 at 14:56

Ahsan Khurshid · Answer 2 · 2017-11-07T05:55:52.440

10

Edited:

The vertical-align CSS property specifies the vertical alignment of an inline, inline-block or table-cell element.

Read this article for Understanding vertical-align

edited Nov 07 '17 at 05:55

answered Jul 30 '12 at 08:54

Ahsan Khurshid

9,383
1
33
51

1

It applies to `inline-block` elements too. – Rolf Oct 22 '17 at 12:20
1

Updated. I've missed that. Thanks for mentioning. – Ahsan Khurshid Nov 07 '17 at 05:56
9

this isn't an answer – Serzhan Akhmetov Mar 06 '20 at 01:57

Gabriel · Answer 3 · 2015-04-10T12:12:13.870

8

Vertical alignment doesn't work with floated elements, indeed. That's because float lifts the element from the normal flow of the document. You might want to use other vertical aligning techniques, like the ones based on transform, display: table, absolute positioning, line-height, js (last resort maybe) or even the plain old html table (maybe the first choice if the content is actually tabular). You'll find that there's a heated debate on this issue.

However, this is how you can vertically align YOUR 3 divs:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    display:inline-block;
    vertical-align: middle; 
}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua; 
    display:inline-block;
    vertical-align: middle; 
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle; 
}

Not sure why you needed both fixed width, display: inline-block and floating.

edited Apr 10 '15 at 12:12

answered Apr 07 '15 at 09:53

Gabriel

127
1
3

Could you add some code to your answer in order to show how to achieve the solution? – abarisone Apr 07 '15 at 10:09
Also, the "correct answer" is so easy to break... it makes me wonder how on Earth 19 people up-voted it. – Gabriel Apr 10 '15 at 12:07
4

the question said "he need the float:right on the last element", so he may need the last element to be along the right side of the container. how to achieve that goal in your answer? – Aug 10 '16 at 02:07
Good answer, and besides so clear ! It just missing the Flexbox option. – Luillyfe May 13 '17 at 22:22
This solution does not display the last item aligned to right. See: http://jsfiddle.net/eprky4q1/ – Skrol29 Mar 31 '22 at 06:52

Why doesn't vertical-align work properly when using float in CSS?

3 Answers3

Linked

Related