Problema con el "margin"

blancoarnau · #1 (**permalink**) 15/12/2013, 14:24

Hola, muy buenas.
Tengo un problema que no sé como solucionarlo. No manejo muy bien la clave "margin" y siempre se quedan todos los divs desordenados sin saber el por qué.
Hice un html con la función de que al escribir un número en una casilla y pulsar un botón, una barra aumentaba en tan por ciento al número escrito. Bueno, eso es Javascript y funciona perfectamente, el problema es que me ha quedado todo desalineado:

Código HTML:

Ver original<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barra de carga</title>
<head><h1><center>Barra de carga</center></h1></head>
<body>
<div id="recuadro"><div id="barra" /></div><input type="text" size="3" id="text"/>%<input type="button" value="Aplicar" onClick="calcular()" id="clic" />
</body>
<style type="text/css">
body {
    margin-left:500px;
    margin-top:250px;
}
div#recuadro{
    border-style:solid;
    border-color:gray;
    height:20px;
    width:100px;
    border-width:1px;
}
div#barra{
    background-color:blue;
    height:100%;
    width:0%;
}
div#text{
    margin-left:5px;
}
</style>
<script type="text/javascript">
    function calcular() {
        var x = document.getElementById("text").value;
        if(isNaN(x) || x>100) {
            alert("Este número es mayor a 100 o no es un número");
        }else{
            document.getElementById("barra").style.width=x + "%";
        }
    }
</script>
</html>

Y me queda algo así:

¿Qué debo hacer para arreglarlo? Yo quiero que el título quede arriba y la barra más el text, el "%" y el botón queden alineados en medio de la pantalla.
¿Alguna ayudita? Gracias.

pzin · #2 (**permalink**) 15/12/2013, 15:32

Pues la verdad es que te estás complicando mucho, además de que sólo estará centrado en tu pantalla si lo haces así.

Para centrar algo horizontalmente, puedes usar:

Código CSS:

Ver originalmargin: 0 auto;

en un elemento de bloque.

Ponerle los márgenes así a body no creo que sea buena idea.