Vertically Center Content of Floating 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>

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;
}

Vertically Align Text Within Floating Div

In your css try using line-height on your container. Use the same value in your line-height as in the height of your container. That should vertically align you text.

If the div is height:50px; than add line-height:50px;

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

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 center 2 floating divs

There is a really cleaver answer to this at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ It suggests this code:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

There are other solutions to this problem also, but this is the most simple. You can then just float each box left or right.

EDIT: another link with a lot of ways of doing this http://css-tricks.com/centering-css-complete-guide/

Vertically centre child in floated parent

You could use flexbox, see jsfiddle https://jsfiddle.net/d5Lptwut/2/

<section class="wrapper">
  <div class="one-half vertical-align">
    <p> This wants to be centered vertically in relation to the image on the right.</p>
  </div>
  <div class="one-half last">
    <img class="image" src="http://www.premiercottages.co.uk/images/regions/Scotland.jpg">
  </div>
</section>

.wrapper {
    background-color: #50C5B7;
    padding: 5px;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.image {
    width: 100%;
    height: auto;
}

.one-half {
    width:48%;
    margin-right: 4%;
    background-color: lightgrey;
    display: inline-block;
    box-sizing: border-box;
}

.vertical-align {
    flex-item-align: center;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;

}
.last {
    margin-right: 0;
}

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 Center Content of Floating Div