关于使用text-align:center进行居中的问题

关于text-align:center

1. text-align是给块级元素使用的，其作用为让块级元素里面的文本或行内元素对齐。
2. 如果此块级元素里面含有块级元素，那么这个被含有的块级元素不会被控制居中
3. text-align:center也能用于行内元素，但前提是此行内元素被设置为块级元素

测试如下：

 

 <div style="border: 1px solid red; text-align: center;">

 

        555（文本）<br /><br />

        <button>test（行内元素button）</button><br />

        <button style="display: block;">test(设置为块级元素了的行内元素button)</button><br />

 

        <table style="border: 1px solid red;" width="299px">

            <tbody>

                <tr>

                    <td>test（块级元素table）</td>

                </tr>

            </tbody>

        </table>

        <table style="border: 1px solid red; display: inline;" width="299px">

            <tbody>

                <tr>

                    <td>test（设置为行内元素了的块级元素table）</td>

                </tr>

            </tbody>

        </table>

 

        <p style="border: 1px solid red; width: 299px;">test(块级元素p)</p>

        <p style="border: 1px solid red; width: 299px; display: inline;">test(设置为行内元素了的块级元素p)</p>

 

    </div>