我怎样才能将这个 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 置于容器的中心（div 具有 class="panel-wrapper").

这些是与这 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) 这里我select在FireBug外部div有class="panel-wrapper"到显示它水平扩展到页面的 100%:

2) 在这里，我通过 FireBug 内部 div 突出显示了具有 class="panel-content" 的同一页面然后我通过内联 CSS

将固定的 width 设置为 900px

所以，从代码和之前的截图可以看出，外部（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 的 div 中]="panel-wrapper"?

Tnx

Answer 1

你必须去掉浮动并将文本居中对齐到他的父级，试试这个：

CSS

panel-wrapper {
    overflow: hidden;
    width: 100%;
    display: block;
    text-align: center;
}

.panel-content {
    background: none repeat scroll 0 0 white;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    display: inline-block;
}

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%;
}

DEMO HERE

Answer 2

将您的 panel-content class css 更改为

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

我怎样才能将这个 div 正确地居中到它的容器中？怎么了？

How can I correctly center this div into its container? What is wrong?

html

css

xhtml

layout