CODEWITHSUNDEEP
html
Joe Yan
Joe Yan

Reputation: 2095

How to center a DIV table in browser

I used DIV to create a 2 column table.

My div table located at left hand side. How to center this div table ? Thanks

<div id="result" align="center" >
<div id="col1" style="float:left">
A<br />
B<br />
</div>
<div id="col2" style="float:left">
1<br />
2<br />
</div>
</div>

Upvotes: 2

Views: 3422

Answers (4)

peaceAndCode
peaceAndCode

Reputation: 11

You can use 2 different methods:
the first one is the display flex,align-items center and justify-content-center combo,you just have to put this style on your first div element

.center-flex{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
<div id="result" class="center-flex">
    <div id="col1" style="float: left;">
        A<br />
        B<br />
    </div>
    <div id="col2" style="float: left;">
        1<br />
        2<br />
    </div>
</div>

the second one is the "position absolute" method,you can use this style on your first div element

.center-absolute{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
<div id="result" class="center-absolute">
    <div id="col1" style="float: left;">
        A<br />
        B<br />
    </div>
    <div id="col2" style="float: left;">
        1<br />
        2<br />
    </div>
</div>

Hope this can help you!

Upvotes: 1

talha2k
talha2k

Reputation: 25650

add this in style tag, it will work for you in all browsers:

#result{
        position:absolute;
        top:50%;
        left:50%;
}

Hope this helps.

Upvotes: 0

aviv
aviv

Reputation: 2809

See the style i added to the outer div:

<div id="result" style="margin: 0 auto; text-align:center;width:800px;">
    <div id="col1" style="float:left">
       A<br />
       B<br />
    </div>
    <div id="col2" style="float:left">
       1<br />
       2<br />
    </div>
 </div>

Upvotes: 0

Ray Toal
Ray Toal

Reputation: 88378

Style the outer div with the width you want, and do the usual margin: 0 auto thing.

http://jsfiddle.net/pQfWg/

Upvotes: 0

Related Questions