Question

在我的网站上，我有一个显示的div设置：table。在另一个带显示的div里面：table-row。在里面设置2个div显示：table-cell。在第一个（左）table-cell div上，我试图将div放在中心位置。 div将居中的唯一方法是，如果我在其上面加上div，并且有足够的内容来填充整个div。

这是我的HTML（有很多丑陋的不间断空格）：

<section class="main-content">
<div class="row">
<section class="cell leftSide">
<section class="mainWrap">
<div class="clear-fix"></div>
<div class="paddingWrap">
    <div class="widthFiller">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div class="sitemap">
        <hgroup class="title">
            <h1>@Html.MvcSiteMap().SiteMapTitle()</h1>
        </hgroup>
        @Html.MvcSiteMap().SiteMap()
    </div>
    </div>
    </section>
    </section>
    </div>

我的相关CSS：

.main-content {
    display: table;
    width: 100%;
}
.main-content .row {
    display: table-row;
}
.main-content .cell {
    display: table-cell;
    vertical-align: top;
}
section.mainWrap {
    display: table-cell;
    font-size: 1.2em;
    margin-top: -34px;
}
.paddingWrap {
    padding: 15px 70px;
}
.mainWrap .sitemap {
    border: 2px solid #aaaaaa;
    display: table;
    margin: 20px auto;
    padding: 10px;
    text-align: center;
}

我需要将sitemap div置于mainWrap表格单元格的中心。如果我删除所有空格的“widthFiller”div，则sitemap div将返回到左侧。这是我的实时页面，您可以查看该问题：http://clubschoicefundraising.com/about/site-map

Answer 1

我相信有一个显示：表格单元格需要它在表格中。所以围绕div＆＃34; mainWrap＆＃34;使用样式显示放置另一个div：table和width：100％

这样：

<div class="mainWrapWrapper" style="display:table;width:100%">
 </div class="mainWrap">
  .....
 <div>
</div>

目前的问题是mainWrap不会服从任何宽度的css，因为它不在表格div中，当你检查它的宽度时它不是100％所以你的边距：0px auto on the sitemap不会做任何事情

编辑：另外，您可以删除宽度填充

试图将div放在具有显示表格单元格的div中

1 个答案: