Question

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

<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;。这可能需要明确设置该元素的宽度。

Answer 2

div.content table {
    margin: 0 auto;
}

Answer 3

table {width:100px;margin:0 auto;}

这应该让你正确，只需指定你所追求的宽度。

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

3 个答案: