CODEWITHSUNDEEP
htmlcss
dmikester1
dmikester1

Reputation: 1372

trying to center a div inside a div that has display table-cell

On my site, I have a div set to display: table. Inside that another div with display: table-row. Inside that 2 divs set to display: table-cell. On the first(left) table-cell div, I am trying to center a div. The only way that div will center is if I stick a div above it with enough content to fill the entire div.

Here is my HTML (with a lot of ugly non-breaking spaces):

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

And my relevant 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;
}

I need that sitemap div to be centered in the mainWrap table cell. If I remove the "widthFiller" div with all the spaces, the sitemap div goes back to the left side. And here is my live page that you can view the issue: http://clubschoicefundraising.com/about/site-map

Upvotes: 0

Views: 69

Answers (1)

SmithMart
SmithMart

Reputation: 2811

I believe to have a display:table-cell you need it inside a table. so around the div "mainWrap" put another div with the style display:table and width:100%

so:

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

currently the issue is that mainWrap will not obey any width css because it is not inside a table div, and when you check it's width it's not 100% so your margin:0px auto on the sitemap will not do anything

Edit: also, you can remove width filler

Upvotes: 1

Related Questions