CODEWITHSUNDEEP
htmlcss
craig1231
craig1231

Reputation: 3877

How to center content within a div

I am trying to center a content that contains a table inside a div... But I cannot seem to work out how to do it...

Basically Id like to put some text next to a table, and center the table and the text to the page...

The content I am trying to center:

        <div style="background: purple; padding: 5px;">
            <div>
            <table style="float: left;">
                <tr>
                    <th>This</th>
                    <th>is</th>
                    <th>a</th>
                    <th>test</th>
                </tr>
            </table>
            </div>
            <span style="background: yellow; margin-left: 15px; float: left;">This is a test</span>
        </div>

What I have tried:

    <div style="background: red; width: 100%; text-align: center">
        <div style="background: purple; padding: 5px;">
            <div>
            <table style="float: left;">
                <tr>
                    <th>This</th>
                    <th>is</th>
                    <th>a</th>
                    <th>test</th>
                </tr>
            </table>
            </div>
            <span style="background: yellow; margin-left: 15px; float: left;">This is a test</span>
        </div>
    </div>

If someone would be able to tell me what I am doing wrong here it would be greatly apprectiated.

Upvotes: 2

Views: 13321

Answers (5)

Mate Šimović
Mate Šimović

Reputation: 945

Put the desired content inside a <p style="text-align: center;"> element, and it will be horizontally centered.

Upvotes: 0

Bharat Soni
Bharat Soni

Reputation: 2902

you can provide ID to inner div say inner and say outer to top div:

#outer{width:100%}
#inner{float:none;margin:0 auto;display:table;}

if you find any problem let me know!!

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

Here's how you would do that:

http://jsfiddle.net/7TEqW/2/

HTML:

<div class="outer">
    <div class="inner">
        <table>
            <tr>
                <td>TABLE TEXT</td>
            </tr>
        </table>
        <span>SPAN TEXT</span>
    </div>
</div>

CSS:

.outer {
    width: 100%;
    text-align: center;
}

.inner {
    display: inline-block;
    margin: 0 auto;
}

table {
    width: 200px;
    float: left;
    margin-right: 20px;
    background: #999;
}

span {
    display: inline-block;
    width: 100px;
    background: #ccc;
}

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50269

You can center elements using text-align:center if they are inline or inline-block. If we remove the floats and sit them next to each other using display:inline-block on the <table>, this method can be used.

jsFiddle

CSS

table {
    display:inline-block;
}
.wrapper {
    text-align:center;
}

HTML

<div class="wrapper" style="background: purple; padding: 5px;">
    <table>
        <tr>
            <th>This</th>
            <th>is</th>
            <th>a</th>
            <th>test</th>
        </tr>
    </table>
    <span style="background: yellow; margin-left: 15px;">This is a test</span>
</div>

Upvotes: 1

Sowmya
Sowmya

Reputation: 26989

Remove float:left and try adding margin:0 auto

.wrap{
background: purple; padding: 5px;    
    text-align:center;
    overflow:auto;
    position:relative
}
table{
    background:pink;
    margin:0 auto
}

span{
    background: yellow; margin-left: 15px;
        margin:0 auto
}

DEMO

Upvotes: 0

Related Questions