How to Vertically Middle-Align Floating Elements of Unknown Heights

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>

Vertical align floated elements of unknown height

You can do this with Flexbox, you just need to use align-items: center on header for vertical align.

header {  border: 1px dotted magenta;  display: flex;  justify-content: space-between;  align-items: center;}#left {  background-color: #cfc;}#right {  background-color: #ccf;}button {  padding: 8px 10px;}

<header>  <div id="left">    My brand name  </div>  <div id="right">    <button>Button 1</button>    <button>Button 2</button>    <button>Button 3</button>  </div></header>

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 div panel-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 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 align floating div to an unknown sized div

It is achievalbe using pure CSS. Here's what you're going to do with your CSS.

     .paragraphWrapper{ position: relative; } /*so that its absolutely positioned children calculate their offset wrt this element*/
     .paragraphWrapper:after{ content: ''; display: table; clear: both; }
     .paragraphWrapper > div{
        display: inline-block;
        vertical-align: middle;
     }
     .paragraph{
        border: 1px dashed #ccc;
        float: left;
        clear: both;
        margin: 5px;
        margin-bottom: 50px;
        width: 415px;
     }
     .paragraphMetaInfo{
        position: absolute;
        top: 50%;
        left: 405px;
        /*move them 50% of text's width towards top to get properly centered*/
        -moz-transform: rotate(90deg) translate(-50%, 0);
        -o-transform: rotate(90deg) translate(-50%, 0);
        -webkit-transform: rotate(90deg) translate(-50%, 0);
        transform: rotate(90deg) translate(-50%, 0) /*as pointed out by Shikkediel*/
     }

How to Vertically Middle-Align Floating Elements of Unknown Heights