No se puede encoger completamente y centrar un elemento

Estoy usando el siguiente código para crear una página envuelta y centrada. Todo está bien si la ventana del navegador es más ancha que el ancho máximo potencial. En este caso, hay tres párrafos flotantes con anchos fijos. Si la ventana es lo suficientemente amplia como para que todos puedan flotar en la misma línea, el div se centra y se envuelve correctamente. Pero cuando el navegador es más estrecho y uno de los párrafos se ajusta a la línea siguiente, el div se expande al ancho total de la ventana y ya no se ajusta. He intentado todo lo que puedo pensar y me voy a dar por vencido y seguir adelante a menos que alguien tenga una idea nueva. Curiosamente, funciona bien en ie7. Imagínate.No se puede encoger completamente y centrar un elemento

<!doctype html> 

<head> 
<style type="text/css"> 

header, footer, nav, section, article { display: block; } 

body 
{ 
    font-size:1em; 
    margin:0; 
    padding:0; 
    font-family: Verdana, Arial, Helvetica, Sans-Serif; 
    color:#000; 
    background:#ddd url(images/BG.jpg); 
} 

/*********** Start shrink wrapped and centered layout styles ************************/ 
#page { 
    position:relative; 
    overflow:hidden; 
} 
#container { 
    float:left; 
    position:relative; 
    left:50%; 
} 
#content 
{ 

    float:left; 
    position:relative; 
    right:50%; 
} 
/*********** End shrink wrapped and centered layout styles ************************/ 
#content 
{ 
    border:solid 4px #bbb; 
} 
p 
{ 
    width:20em; 
    background-color:red; 
    float:left; 
} 
</style> 
<body> 
<div id="page"> 
    <div id="container"> 
    <div id="content"> 
     <p>p1</p> 
     <p>p2</p> 
     <p>p3</p> 

    </div> 
    </div> 
</div> 
</body> 
</html>

Fuente

2012-01-17 Rob

Usted podría tratar de usar 'diplay: inline-block' vez de 'float'; sin embargo, esto no funcionaría en IE7: http://jsfiddle.net/j6NuE/ –

Cuando uso inline-block, obtengo el mismo comportamiento. El problema que estoy teniendo es cuando el ancho del navegador obliga a los párrafos flotantes a envolver. El div que contiene ya no se encoge. Quiero que continúe disminuyendo a medida que se van completando los párrafos. En este caso, se encogería cuando el primero se envolviera, y luego se encogería nuevamente cuando se envolviera el siguiente. Entonces, habría tres anchos posibles para el div que contiene (60em, 40em o 20em), dependiendo del ancho de la ventana del navegador. – Rob

Es posible con las consultas de los medios. Se degradará con gracia en los navegadores obsoletos.

p {width:200px; height:20px; background:salmon; float:left; margin:10px; padding:10px;} 
div {background:lightblue; overflow:auto; width:720px; margin:0 auto;} 

@media screen and (max-width: 720px) { 
div{width:480px;} 
} 
@media screen and (max-width: 480px) { 
div{width:240px;} 
}

Demo

Fuente

2012-01-18 01:29:01 bookcasey

Para hacer display: inline-block y el trabajo centrado es necesario configurar el texto-align: center en el contenedor principal

Fuente

2013-11-22 19:43:01 girok

No se puede encoger completamente y centrar un elemento

Respuesta

Cuestiones relacionadas