¿Cómo centro un div y lo amplío alrededor de los divs dentro de él?

Tengo una página que quiero centrada, con un fondo y un borde alrededor de todo el contenido.¿Cómo centro un div y lo amplío alrededor de los divs dentro de él?

Hice un div y lo configuré con el color de fondo y las configuraciones de borde que quiero.

El problema es que tiene divs en su interior que flotan y el fondo no se extiende alrededor de los divs flotantes. La única forma en que pude hacer que funcione fue estableciendo la posición: absoluta. Luego, el límite se expandió alrededor de los divs flotantes, pero no pude centrarlos usando html/css regular.

Encontré un hack de javascript para hacerlo central pero solo se centra después de que la página se carga y se ve mal.

Estoy seguro de que hay una forma de expandir el contenedor y mantenerlo centrado, simplemente no lo puedo entender.

aquí es una página HTML de ejemplo que comparte mis problemas

<div style="background-color: Red; width: 980px; position: absolute;" id="container"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <div style="width: 400px; background-color: Black; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="width: 400px; background-color: Blue; float: left;"> 
     <br /> 
     <br /> 
    </div> 
</div>

y aquí está el Javascript que hace que funcione (utiliza Jquery)

$(function() { 
     var winH = $(window).height(); 
     var winW = $(window).width(); 
     $("#container").css('left', winW/2 - $("#container").width()/2); 
    });

Tiene que haber una mejor manera.

Gracias

Fuente

2009-05-20 Sruly

Uso auto como izquierda y derecha margin para centrar el elemento.

Ponga un elemento después de los elementos flotantes y use clear para colocarlo debajo de ellos. Como no está flotando, afectará el tamaño del div externo.

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <div style="width: 400px; background-color: Black; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="width: 400px; background-color: Blue; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="clear: both; height: 0; overflow: hidden;"></div> 
</div>

Fuente

2009-05-20 16:25:33 Guffa

Gracias. Pensé que había una manera, pero no podía resolverlo. – Sruly

esto es un asunto difícil, pero yo uso el siguiente código en hojas de estilo;

<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>

then in the body;

<div class="sentor"> 
<div class="child"> 
    <div id="mycontent">

esto debe hacer el truco

Fuente

2009-05-20 16:24:48 simon622

Tal vez no estoy entendiendo su pregunta lo suficientemente bien, pero creo que está buscando algo similar a esto. Aquí está nuestro diseño simple:

<html> 
    <head> 
     ... 
    </head> 

    <body> 

     <div id="center"> 
      <!-- your content --> 
     </div> 

    </body> 

</html>

Para obtener el contenido del div # centro a moverse hacia el centro de la página, necesitamos la siguiente CSS:

body { 
    text-align: center; 
} 

div#center { 
    text-align: left; 
    width: 600px; // Or some other arbitrary width 
    margin: 0 auto; 
}

Esto centrará todo dentro del cuerpo. Sin embargo, text-align: center; la propiedad también se aplicará a los hijos del cuerpo, por lo que la cancelaremos con la segunda regla de estilo. Como alternativa, en lugar de la div # centro, se puede utilizar la siguiente regla de estilo:

body * { 
    text-align: left; 
}

Fuente

2009-05-20 16:31:45

Esto utiliza un error en Internet Explorer. No funciona en ningún otro navegador, ya que siguen el estándar y no aplican text-align para bloquear elementos. – Guffa

Sí, dejé fuera el margen: 0 auto; parte. Me había olvidado de eso. ¡Incluso lo he incorporado a numerosos trabajos propios! –

Uso:

<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">

El margen: 0 auto; centrará el div rojo.

El desbordamiento: oculto; hará que el div rojo estire para contener los dos divs flotantes.

Fuente

2009-05-20 21:24:34 Emily

¿Cómo centro un div y lo amplío alrededor de los divs dentro de él?

Respuesta

Cuestiones relacionadas