HTML - 居中 DIV 内容

Question

我正在尝试使用类 test1 跨越和居中 div 的内容。将 div 跨越页面的整个宽度是可行的。但是将 div 中的内容居中不会。简单地使用 align=center 会发生什么？

<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

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