CSS中心 - 更换对齐属性的最佳方法是什么？

Question

很抱歉打败了一匹死马,但我需要一些关于将内容集中在div标签内的建议.我有一个div标签,里面有一个表(带有上下文类的div).我有一个对齐属性,它产生我想要的结果,但我想用css正确地做到这一点.如果我将div的'text-align'设置为'center',它会向下传播到表格单元格中,这不是我想要的.那么......如何在不影响表格单元格的情况下居中div的内容？这是这段代码的小提琴.

<style type="text/css">
    * { font-family: Arial; font-size: 12px; }
    .container { padding-bottom: 10px; }
    .content { background-color: #EEEEEE; }
</style>
<div class="container">
    <div>Demo</div>
    <div class="content" align="center">
        <table>
            <tbody>
                <tr>
                    <td>Item 1</td>
                    <td style="padding-left: 10px;"><a href="javascript:void(0);">remove</a></td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td style="padding-left: 10px;"><a href="javascript:void(0);">remove</a></td>
                </tr>
                <tr>
                    <td>Item 3</td>
                    <td style="padding-left: 10px;"><a href="javascript:void(0);">remove</a></td>
                </tr>

                <tr>
                    <td>Item 4</td>
                    <td style="padding-left: 10px;"><a href="javascript:void(0);">remove</a></td>
                </tr>

                <tr>
                    <td>Item 5</td>
                    <td style="padding-left: 10px;"><a href="javascript:void(0);">remove</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

而不是align属性,这样做:

table { margin: 0 auto; }

现场演示: http ://jsfiddle.net/V9JRP/1/

当然,您可能希望使用ID或类选择器来选择表格...

规则是这样的:如果元素是块级元素,并且您想要居中,则margin:0 auto;在其上设置.这可能需要明确设置该元素的宽度.