HTML - Centering DIV content

Question

I am trying to span and center the content of div using class test1. Spanning the div across the full width of the page works. But centering the content in the div does not. What ever happened to using align=center simply?

<style>
    div.test1
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    div.test2
    {
        display: inline;
        float: left;
    }
</style>

<div class="test1">
    <div class="test2">This</div>
    <div class="test2">Is</div>
    <div class="test2">A</div>
    <div class="test2">Test</div>
</div>

Answer 1

try this:

<style>
    div.test1
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

</style>

<div class="test1">
    <div class="test2">This</div>
    <div class="test2">Is</div>
    <div class="test2">A</div>
    <div class="test2">Test</div>
</div>

Answer 2

div.test1 {
    text-align: center;
}
div.test2 {
    display: inline-block;
    *display: inline; /* IE7 fix for inline-block */
    *zoom: 1;         /* IE7 fix for inline-block */
}

jsfiddle demo