How can I center a

Question

I currently have this div:

<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
    TEST
</div>

I have tried using <div style="text-align:center;"> </div> like this:

<div style='text-align: center;'>
    <div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
        TEST
    </div>
</div>

^ Doesn't work

I've also tried using <div style="text-align:center; display:block;"> </div> like this:

<div style='text-align: center;  display:block;'>
    <div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
        TEST
    </div>
</div>

^ Doesn't work

I've also tried using <center> </center> (even though it is not recommended...

<center>
    <div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
        TEST
    </div>
</center>

^ It works!!!

The only problem is that <center> is terrible to use as it is outdated! So how can I do this without using <center>

Please do a search. Certainly you didn't believe you were the first person in the history of SO to want to center a DIV. — Bill Gregg, Nov 26 '13 at 19:34
A `
` is a block level element, unaffected by `text-align`. They can be center-aligned using `margin:auto`. [Example](http://jsfiddle.net/v6Uec/) — Richard JP Le Guen, Nov 26 '13 at 19:35

score -1 · Answer 1 · answered Nov 26 '13 at 19:35

-1

is this what you want to achieve? http://jsfiddle.net/cancerian73/LUcUZ/

<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px; margin:0 auto;">
    TEST
</div>

answered Nov 26 '13 at 19:35

San

1,237
1
14
29

How can I center a

1 Answers1