He estado buscando una forma de centrar un div con un ancho máximo establecido. Supuse que podría hacerlo dándole al div un ancho máximo del 90% y un margen automático, luego use jQuery para encontrar y establecer un ancho fijo, lo que esperaba, el margen automático se centraría para mí.

Algo como lo siguiente.

JQuery:

$(function(){
    $wrap = $('#wrap');

    $wrap.width($wrap.width());
});

CSS:

#wrap {
    max-width:90%;
    margin:auto;
}

HTML:

<div id="wrap">
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
     <img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
</div><!-- end div id="wrap" -->

Básicamente, quiero hacer un div de envoltura que pueda atascar lleno de imágenes, pero no exceda el 90% del ancho de la pantalla; tome la envoltura y céntrela. es posible? Entiendo que mi pensamiento JQuery es casi seguro que está equivocado. Soy muy nuevo en esto, pero supuse que Javascript es la forma de hacerlo.

0
Michael Gruber 21 jun. 2011 a las 23:26

4 respuestas

La mejor respuesta

En caso de que alguien más tenga curiosidad, descubrí una forma de JQuery para hacer lo que quería.

Tengo un montón de imágenes de tamaño uniforme que quiero en un div escalable que también tiene un ancho máximo del 90%. Esto es lo que se me ocurrió:

JQuery:

function divResize() {
var divWidth;
var extra;
divWidth = $(window).width() * .9;
extra  = divWidth % /*IMAGE SIZE IN PX*/;
divWidth = (divWidth - extra);
  $("#wrap").css({ width: divWidth });
}

$(document).ready(divResize);
$(window).resize(divResize);

CSS:

#wrap {
    margin:auto;
}

HTML:

<div id="wrap">
    <img src="/images.png" />
    <img src="/images.png" />
    <img src="/images.png" />
    <img src="/images.png" />
    <img src="/images.png" />
</div>

Creo que mi verdadero problema era que no podía explicarlo adecuadamente. Gracias a todos por la ayuda.

1
Michael Gruber 22 jun. 2011 a las 15:26

¿Qué no funciona aquí? Esto funciona bien para mí, pero no creo que necesites JavaScript.

<html>
<body>
    <style>
        body { }
        #wrap {max-width: 90%; margin: auto; background-color: red}
    </style>
    <div id='wrap'>a a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa a<br/>a</div>
0
Shawn 21 jun. 2011 a las 19:32

No se necesita Javascript, todo está bien.

http://jsfiddle.net/Kyle_Sevenoaks/RvLuE/

1
Kyle 21 jun. 2011 a las 19:33

Si desea centrar una fila posiblemente corta , configure la alineación del texto de ajuste al centro, o haga que se muestre: bloque en línea si tiene un borde que necesita mostrar.

0
kennebec 21 jun. 2011 a las 19:37