How to Center Floated Elements

How do I center floated elements?

Removing floats, and using inline-block may fix your problems:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(remove the lines starting with - and add the lines starting with +.)

.pagination {  text-align: center;}.pagination a {  + display: inline-block;  width: 30px;  height: 30px;  margin-left: 3px;  background: url(/images/structure/pagination-button.png);}.pagination a.last {  width: 90px;  background: url(/images/structure/pagination-button-last.png);}.pagination a.first {  width: 60px;  background: url(/images/structure/pagination-button-first.png);}

<div class='pagination'>  <a class='first' href='#'>First</a>  <a href='#'>1</a>  <a href='#'>2</a>  <a href='#'>3</a>  <a class='last' href='#'>Last</a></div><!-- end: .pagination -->

How Do I Perfectly Center a Float Element in Between Two Floated Elements?

One approach would be to set the display of the middle element to inline-block and then use text-align: center on the parent element for horizontal centering:

Example Here

.footer {
    background: #e33;
    padding: 5px;
    text-align: center;
}
.left_edge {
    float: left;
}
.center {
    display: inline-block;
}
.right_edge {
    float: right;
}

Alternatively, you could avoid floating the elements, and use the following method instead:

Example Here

.footer > span {
    display: inline-block;
    width: 33.333%
}
.left_edge {
    text-align: left;
}
.center {
    text-align: center;
}
.right_edge {
    text-align: right;
}

How do I center align a div that contains floated elements?

As you can see here the "div that contains floated elements" is actually in the center (red).

I am assuming you want to center the floating elements themselves, not their parent. I'm afraid you can't do that (as far as I know). But in case you are not depending on your elements actually floating, you propably just want to display your .colum as inline-block with an text-align:center set to the parent.

Changes to your CSS:

.parent_container {
    text-align:center;     // added
}
.column {
    display: inline-block; // added
    margin: 0 25px;        // added
    float: left;           // removed
    margin-right: 50px;    // removed
}

Result as Fiddle

How do I center align floated elements?

For your vary div size "red line aligment" I recommend add:

.boxa { 
    min-width: 85px;
}

How to Center Floated Divs in a Container

It is possible. Using http://www.pmob.co.uk/pob/centred-float.htm and http://css-discuss.incutio.com/wiki/Centering_Block_Element as a source.

Here is a fiddle demonstrating the concept, using the HTML and CSS from below: https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

This is the minimum CSS needed for the effect:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

Explanation:

Start off with just the li { float: left; } rule. Then wrap those floats in the left: 50%; relative position, so the left edge of the <ul>'s box is in the horizontal centre of the page, then use the rules in #outer to correctly adjust it so the centre of #inner is aligned with the page.

Centering floating divs within another div

First, remove the float attribute on the inner divs. Then, put text-align: center on the main outer div. And for the inner divs,
use display: inline-block. Might also be wise to give them explicit widths too.

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</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;
}