html - 我怎样才能正确地将这个 div 放在它的容器中？怎么了？

Question

我不太喜欢 HTML 和 CSS，我在尝试将 div 居中到它的容器时遇到了一些问题，而我在一个非常古老的传统 JSP 页面中却遇到了这种情况。

所以情况是这样的，我有这样的东西:

<div class="panel-wrapper">
    <div class="panel-content" style="width: 900px">
        <div id="table1Container">
            // THIS CONTAINS ORRIBLE SHOWED TABLE STRUCTURE
        </div>
    </div>
</div>

我想将具有 class="panel-content" 的 div 置于容器的中心(具有 class="panel-wrapper" 的 div)。

这些是与这 2 个 div 相关的 CSS 设置:

.panel-wrapper {
    float: left;
    overflow: hidden;
    width: 100%;
}

.panel-content {
    background: none repeat scroll 0 0 white;
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    overflow: hidden;
    position: relative;
    width: 90%;
}

table.standard-table-cls {
    border: 1px solid #76818a;
    border-collapse: collapse;
    color: #76818a;
    font: 11px Verdana,Geneva,Arial,Helvetica,sans-serif;
    margin: 0 !important;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

这是我看到的:

1) 在这里，我在 FireBug 中选择具有 class="panel-wrapper" 的外部 div，以显示它水平扩展到页面的 100%:

2) 在这里，我展示了 FireBug 突出显示具有 class="panel-content" 的内部 div 的同一页面，然后我将固定的 宽度设置为 900px 通过内联 CSS

因此，正如您从代码和之前的屏幕截图中看到的那样，外部 (class="panel-wrapper") 似乎扩展到了页面宽度的 100%，并且更多内部 class="panel-content" (我想居中的那个)有一个固定的 900px 宽度和一些从它的 CSS 给定的边距(margin-left: 5%; margin-right: 5%).

好的，所以我尝试将其居中以这种方式更改内联 CSS:

<div class="panel-content" style="width: 900px; margin-left: 0 !important; margin-right: 0 !important;">

但它没有居中，而是向左移动(只是没有更多的边距或类似的东西)。

这是我看到的:

那我错过了什么？我怎样才能正确地将具有 class="panel-content" 的 div 置于具有 class="panel-wrapper" 的 div 中？

谢谢

Answer 1

将您的 panel-content 类 css 更改为

.panel-content {
    background: none repeat scroll 0 0 white;
    margin: 0 auto;
    width: 90%;
}