Necesita ayuda para centrar horizontalmente un DIV posicionado absoluto

I need to center some absolute positioned elements relative to a container. After reading numerous articles, it seems a structure like following will do the job. The only problem is with IE7. Somehow the width of item1 (div element) shrinks to 0 (even though width is explicitly specified on it) on IE7. item2 works fine in all browsers. My question is why the width style for block element is not honored by IE7 in this situation? Do you know any workaround or fix?

<div style="position: relative; width: 500px; height: 400px; border: thin dotted green;">
    <div style="position: absolute; top: 0px; left: 50%; height: 0px;">
        <div id="item1" style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px; height: 30px;"></div>
    </div>
    <div style="position: absolute; top: 50px; left: 50%; height: 0px;">
        <input id="item2" type="button" value="Button" style="position: relative; display: inline-block; left: -50%;">
    </div>
</div>

He hecho un jsFiddle with above code. Thanks for your input.

preguntado el 08 de enero de 11 a las 22:01

1 Respuestas

Add min-width=300px; so the line of code looks like

<div style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px;min-width:300px; height: 30px;"></div>

Respondido el 09 de enero de 11 a las 01:01

Thanks Alex. This works perfectly. Not sure why IE7 does not take width but min-width does the trick. - Feng Chen

@Feng Glad it worked for you. Go ahead and accept the answer. - Hussein

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.