Floated Divs Obeying/Not Obeying Vertical-Align

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/

vertical-align in table cells not working when there is a floated element inside the td

Try adding an empty element to the td.

<span class="vertical_aligner"></span>

.vertical_aligner {
    vertical-align: middle;
    height: 100%;
    display: inline-block;
}

How to get float:right button to vertically align in the middle

The cleanest way to do that is to use flex like this:

1. Add display: flex to your outer div panel-footer [Check code below]

2. Remove the float and use text-align:right on the span for the button. [Check code below]

3. 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 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>

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

Floated Divs not wrapping correctly when select is last item on line

If you are open to suggestions you can do this with display: inline property.

FIDDLE

E.g. HTML

<div class="wrapper">
  <label for="one">Text</label><br/>
  <input id="one" type="text" value="1" />
</div>

<div class="wrapper">
  <label for="tow">Text</label><br/>
  <input id="two" type="text" value="2" />
</div>
<div class="wrapper">
  <label for="three">Text</label><br/>
  <input id="three" type="text" value="3" />
</div>

<div class="wrapper">
  <label for="four">Text</label><br/>
  <input id="four" type="text" value="4" />
</div>

<div class="wrapper">
  <label for="five">Text</label><br/>
  <input id="five" type="text" value="5" />
</div>

<div class="wrapper">
  <label for="sel">*Select</label><br/>
  <select id="sel">
    <option>--Select--</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

<div class="wrapper">
  <label for="six">Text</label><br/>
  <input id="six" type="text" value="6" />
</div>

<div class="wrapper">
  <label for="seven">Text</label><br/>
  <input id="seven" type="text" value="7" />
</div>

E.g. CSS

.wrapper{
  display: inline-block;
  *display: inline;
  zoom: 1;
}

  input[type='text']{
  width: 50px;
}

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.

How to make text vertical align to the bottom in floating divs?

Added a <div class="inner">, and set it as display:table-cell + vertical-align:bottom, see the following demo and snippet.

Edit: also added calc() to make the photo div is only as wide as the width of the photo and the text div takes up all of the remaining width automatically.

JsFiddle Example

.wrapper {    border: 1px solid blue;    overflow: auto;}.wrapper .text {    float: left;    width: calc(100% - 140px);}.wrapper .photo {    float: right;}.wrapper .inner {    display: table-cell;    height: 140px;    vertical-align: bottom;}.wrapper .inner img {    display: block;}

<div class="wrapper">    <div class="text">        <div class="inner">Text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom.</div>    </div>    <div class="photo">        <div class="inner"><img id="photograph" src="//dummyimage.com/140" /></div>    </div></div>

---

Related Topics