CODEWITHSUNDEEP
csstwitter-bootstrap
fyodorfranz
fyodorfranz

Reputation: 486

Horizontally centering a table-cell within a table

I'm trying to get a table-cell to be centered within a page, and none of the usual tactics have worked; I've tried, specifically, different approaches to text-align and margin: auto, all with no luck.

Does anyone see where I'm going wrong? Here's my code:

<div class="table col-xs-12" style="margin-top: 20px; width: 100%; "> 
    <h3 class="text-center col-xs-12" style="margin-top: 200px; color: #dcdcdc; background-color: #333333; height: 30px; vertical-align: middle; display: table-cell; ">
        Your account is currently pending. Please check back in again later.
    </h3>
</div>

Thanks in advance for any help!

EDIT: Here's a fiddle, if that helps.

Upvotes: 0

Views: 45

Answers (1)

Peter Girnus
Peter Girnus

Reputation: 2729

Remove position: absolute; from your .centered class, delete the wrapper div and apply .centered directly to div with .table class.

HTML:

<div class="table col-xs-12 centered" style="margin-top: 20px;  "> 
    <h3 class="text-center col-xs-12" style="margin-top: 200px; color: #dcdcdc; background-color: #333333; height: 30px; width: 100% !important; vertical-align: middle; display: table-cell; ">Your account is currently pending. Please check back in again later.</h3>
</div>

CSS:

.centered {
    left: 50%;
    transform: translate(-50%,-10%);
}

CODEPEN DEMO

Upvotes: 1

Related Questions