Question

我不是那么喜欢HTML和CSS而且我在尝试将div集中到它的容器中时遇到了一些问题，我将其放入一个非常古老的legaxy 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 =＆＃34; panel-content＆＃34; 的div置于其容器中（具有 class =＆＃34; div的div） -wrapper＆＃34; ）

这些是与这两个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 =＆＃34; panel-wrapper＆＃34; 的外部div，以显示它水平扩展到页面的100％：

enter image description here

2）在这里，我显示了同一页面由FireBug突出显示的内部div有 class =＆＃34; panel-content＆＃34; 并且我已经设置了固定的宽度通过内联CSS

来达到900px

enter image description here

因此，正如您从代码和上一个屏幕截图中看到的那样，外部（ class =＆＃34; panel-wrapper＆＃34; ）似乎已扩展到100％页面宽度和更多内部 class =＆＃34; panel-content＆＃34; （我想要居中的那个）具有900px的固定宽度和CSS的一些余量（边距） -left：5％; margin-right：5％）。

好的，所以我试图以这种方式改变内联CSS：

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

但它没有居中，它在左侧移动（只是没有更多的边距或类似的东西）。

这就是我所看到的：

enter image description here

那我错过了什么？如何正确地将具有 class =＆＃34; panel-content＆＃34; 的div置于具有 class =＆＃34; panel-wrapper＆＃34; 的div中？

TNX

Answer 1

将您的panel-content班级css更改为

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

Answer 2

您必须摆脱浮动并将文本对齐中心设置为其父级，请尝试：

<强> 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

我怎样才能正确地将这个div放入其容器中？怎么了？

2 个答案: