How to Horizontally Center a Floating Element of a Variable Width

Easy way to center variable width divs in CSS

That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:

<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>

<div id="hideoverflow">
    <div id="outer">
        <div id="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel  augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo  libero, commodo ut iaculis in, placerat vel purus.
        </div>
    </div>
</div>

Center variable-width floated element

Add text-align: center; to the wrapper, and then display: inline-block; to the child

Or add display: table; andmargin: 10px auto; to the child element

Or position: relative; left: 50%; float: left;

How to center a div horizontally with a varying width

try this. I have slightly modified your css

.blue-section {                background-color: #9BD0D2;                height: 500px;                width: 100%;                position: relative;            }            #blue-info-container {                top: 20%;                position: absolute;                left: 0;                right: 0;                width: 70%;                margin: 0 auto;                text-align: center;            }            #blue-section-title {                color: #FFF;                font-size: 1.4em;                padding-bottom: 75px;            }            #blue-section-description {                color: #FFF;                font-size: 1.2em;            }            #blue-section-button {                position: absolute;                bottom: 20%;                left: 0;                right: 0;                text-align: center;            }            #blue-section-button span {                border: 1px solid #FFF;                text-align: center;                color: #FFF;                padding: 20px 20px;                display: inline-block;                cursor: pointer;            }

<div class="blue-section">            <div id="blue-info-container">                <div id="blue-section-title">fdsfdsafsda</div>                <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>            </div>            <div id="blue-section-button"><span>MORE ABOUT</span>            </div>        </div>

How do I center content next to a floated element and relative to the containing element?

Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.

So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"

<div>
    <h1 style="text-align:center;">Heading 1</h1>
    <img style="float:left;" src="logo.gif"/>
    <h1 style=" 
             text-align:center;
             margin-left:auto;
             margin-right:auto;
             width:50%;
      ">Heading 2</h1>
</div>
<div style="clear:both;">
  Content goes here
</div>

How do I center an inline-block element of variable width?

Is this what you are looking for?

The code updates :

#mainNavigation {
    text-align: center; /*this does the trick with its child*/
    height: auto;
    width: 100%;
    margin: 0 auto; 
}

    #mainNavigation div {
        /*you said you want them on the left side*/
        text-align: left;
        background-color: blue;
        display: inline-block;
        vertical-align: middle;
        margin-left: -4px; /*inline-block space remove*/

    }

Centering floating ul in a div with css

First, you have the margin's applied to the UL's parent, not the UL. If you want the UL, and NOT #footie, you'll have to move the style declarations (which shouldn't be inline, anyway).

Also, for the margin: auto trick to work, you need to declare a width. Something like:

#footie ul {
    width: 600px;
    margin: 0 auto;
}

Align a div to center

There is no float to center per se. If you want to center a block element inside another do this:

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

with:

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.