0

How can center a div which has "position" styles and content inside? I have the next code:

<div class="block" id="block1" style="position:relative;">
    <img />

    <div id="temperature" style="position:absolute; top:50px; min-width: 400px; height: 300px; margin: 0 auto"></div>

    <div id="tempeControl" style="position:absolute; bottom:0; ">   
        <button id="minus" style="height: 28px; width:128px;">-</button>
        <span id="valueTempe" style="font-weight: bold; color: #fea100; width:28px;">0</span>
        <button id="plus" style="height: 28px; width:128px;">+</button> 
    </div>              
</div>

I've tried with <center> , text-align:center (I think that are the same), and margin-left:auto; margin-right:auto;

vicenrele
  • 971
  • 3
  • 19
  • 37
  • I would avoid the `
    ` tag altogether no matter what you're doing, as it is deprecated. http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html
     – Jason Jan 18 '13 at 18:13

1 Answers1

1

When you have an absolute position, use the following: left: 50%; margin-left: -200px Change the 200px to half of your element's width, including padding.

Mooseman
  • 18,763
  • 14
  • 70
  • 93