html - 一个div不会居中

Question

除了顶部和底部的文本，我无法让 block div 居中。由于某种原因，它们只向左对齐。

我试过 margin:auto 并将宽度设置为 100%。我确信这可能是一个简单的修复，但我似乎无法在我的代码中找到错误。

唯一修复它的方法是添加一个 margin-left，但是它并没有在所有维度上看起来，所以如果它自然地居中会更好。

http://jsfiddle.net/cV4UJ/

一些 HTML 请改用 JSfiddle:

                                <!-- Blocks -->
                                <div class="grid_24 center">
                                        <div class="grid_7">
                                                <div class="grey_boxes">
                                                    <p class="grey">
                                                    test
                                                    </p>
                                                    <p class="complete">
                                                        Complete 
                                                        <img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_complete.png" class="complete" alt=" "/>
                                                    </p>
                                                </div>
                                        </div>
                                        <div class="grid_1">
                                            <p>

                                            </p>
                                        </div>
                                        <div class="grid_7">
                                            <div class="panel">
                                                <div class="boxes card">
                                                    <p class="boxtext">
                                                    test
                                                    </p>
                                                    <p class="rotate">
                                                        <img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
                                                    </p>
                                                </div>
                                                <div class="boxesback card">
                                                    <p class="boxtext">

测试

按钮

                                            </p>
                                        </div>
                                        <div class="grid_7">
                                            <div class="panel">
                                                <div class="boxes card">
                                                    <p class="boxtext">
                                                        test
                                                    </p>
                                                    <p class="rotate">
                                                        <img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
                                                    </p>
                                                </div>
                                                <div class="boxesback card">
                                                    <p class="boxtext">

测试

按钮

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

http://jsfiddle.net/cV4UJ/2/

要使其工作，您需要强制 div.center 表现得像一个 div(现在它具有 .grid_24 类的属性，这是一个内联左浮动元素)

.center {
    margin: 0 auto !important;
    float: none !important;
    display: block !important;
    width: 980px;
    clear: both;
}

居中 div 所需的最重要属性:

• margin :0 自动；
• 没有 float
• 是 block 元素(div 的原始显示)
• 有宽度

我还放了 !important，强制它失去 grid_24 的所有属性