Question

除了顶部和底部的文字外，我无法将我的块div设为中心。由于某些原因，他们只对齐左边。

我尝试了保证金：自动并将宽度设置为100％。我确定它可能很容易解决，但我似乎无法在我的代码中找到错误。

只有修复它的东西是添加一个边距 - 但是它并没有在所有尺寸中查找，所以如果它自然地居中应该是它会更喜欢。

有些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 auto;
no float
是块元素（div的原始显示）
有宽度

我也把！重要的，强迫它失去grid_24的所有属性

一个div不会居中

1 个答案: