centrando un div sin establecer el ancho

¿Hay alguna manera de hacerlo? Al usar navegación que puede cambiar el número de elementos a menudo, sería bueno no tener que calcular el tiempo y actualizar el CSS, sino simplemente tener una solución que funcione.centrando un div sin establecer el ancho

si eso es imposible (supongo que lo es) ¿alguien me puede indicar un javascript que puede hacer esto?

edición

re: proporcionar el código algún código básicamente con los que trabajo, lo que pienso es, la configuración más típica

<div class="main"> 
<div class="nav"> 
    <ul> 
    <li>short title</li> 
    <li>Item 3 Long title</li> 
    <li>Item 4 Long title</li> 
    <li>Item 5 Long title</li> 
    <li>Item 6 Extra Long title</li> 
    </ul> 
</div> 
</div>

editar

.main { 
width:100%; 
text-align:center; 
} 
.nav { 
margin:0 auto; 
} 
.nav ul li { 
display:inline; 
text-align:left; 
}

el problema que he encontrado con esta/estas soluciones es que el contenido se empujó hacia la derecha añadiendo un poco de relleno derecho (de 40 píxeles) parece solucionar este problema a través de los navegadores Estoy comprobando en (O FF IE). .nav { margin: 0 auto; relleno a la derecha: 40px; } No sé de dónde viene este valor y por qué 40px corrige esto.

¿Alguien sabe de dónde viene esto? no es un margen o relleno, sin importar lo que haga, los primeros 40px no se pueden usar para colocarlos. Tal vez sea el ul o li que está agregando esto.

que he tenido un vistazo a la pantalla: camino-celda de la tabla de hacer esto, pero no hay que complicarse con IE y que todavía tiene el mismo problema que la otra solución

edición (última)

bien He intentado algunas cosas con respecto a la sangría. Hemos restablecido todo el relleno a 0

*{padding:0;}

que fija, y no necesito para compensar el relleno (creo que voy a dejar todo mi proceso de modo que si alguien viene a través de esto, 'ellos ll ahorrar algo de tiempo)

gracias por los comentarios y las respuestas

Fuente

2009-11-29 Daniel

Esto es difícil de responder sin saber qué hay en su DIV. Parece que, como requisito previo, debe hacer su ancho DIV elástico (tabla) en lugar del ancho predeterminado del bloque. Y esa es toda una pregunta adicional. – jpsimons

¿Puedes proporcionar el HTML \ CSS que estás usando con tu pregunta? Si la solución implica Javascript, estamos en problemas ... –

Usando la solución que enumero a continuación, no hay problemas con el relleno adicional ... Estoy usando entradas para simular el menú ... por lo que puede indicar que el UL el estilo está agregando el relleno. – PortageMonkey

<div class="nav"> 
<ul> 
    <li>menu 1</li> 
    <li>menu 2</li> 
    <li>menu 3</li> 
</ul> 
</div> 

<style> 
.nav { text-align:center; } 
.nav ul { display:inline-table;} 
.nav ul li {display:inline;} 
</style>

Eso es todo,

Cambiar el número de li, pero ul siempre será el centro alineado

div maquillaje con class = "nav" lugar ul su interior, ul serán siempre alineados centro

Fuente

2012-08-29 20:02:25 Dashrath

una adición que me gustaría añadir (aunque explica por sí mismo) es la adición de 'padding-left: 0;' 'a .nav ul', esto es que no hay css reinicio utiliza – Daniel

jsbin.com/awejuk/1/ – Daniel

~~Si desea centrar un div en su envase, intente establecer el margen izquierdo y el margen derecha del recipiente para automóviles.~~

Parece que alguien tuvo el mismo problema que usted. Espero que esto sea mejor que mi primera recomendación. :)

http://www.leveltendesign.com/blog/nickc/centering-a-css-menu-without-width-aka-shrink-wrap

Fuente

2009-11-29 04:06:13

el ancho debe establecerse para que esto funcione. – carillonator

Ah, sí. Mi error. Ahora entiendo por qué se hizo esta pregunta en primer lugar. –

+1 para el enlace informativo. Buen material. ¡Marcado como favorito! –

Sobre la base de lo que yo creo que está pidiendo, desea centrar un div de forma dinámica, dado que el ancho cambiará según el número de elementos del menú son visibles.Supongo que también te gustaría que esto se centre dinámicamente en el cambio de tamaño también. Esto se puede hacer con un simple javascript como se muestra a continuación. Me he burlado de un ejemplo con el que puedes jugar, funciona en IE y FF. El javascript es la clave. También debe tener en cuenta que, aunque no sea parte de su pregunta, puede tener sentido controlar el ancho mínimo al redimensionar ... sígueme si te topas con eso.

<html> 
<head runat="server"></head> 
<body onload="centerMenu()" onresize="centerMenu()"> 
<form id="form1" runat="server"> 
    <div id="menuWrapper" style="display:inline; height:20px;"> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
    </div> 
</form> 
<script type="text/javascript"> 
function centerMenu() 
{ 
    //Wrap your menu contents in a div and get it's offset width 
    var widthOfMenu = document.getElementById('menuWrapper').offsetWidth; 
    //Get width of body (accounting for user installed toolbars) 
    var widthOfBody = document.body.clientWidth; 
    //Set the width of the menu Dynamically 
    document.getElementById('menuWrapper').style.marginLeft = (widthOfBody - (widthOfMenu))/2; 
} 
</script> 
</body> 
</html>

Fuente

2009-11-29 07:32:52 PortageMonkey

¿Qué tal

#form1 {text-align:center} 
    #menuWrapper{display:inline-block;text-align:left}

Además, woudl sea más accesible para marcar el menú de la siguiente manera:

<form id="navWrapper"> 
    <ul> 
     <li><input></input></li> 
     ... 
    </ul> 
</form>

y utilizar

#navWrapper {text-align:center} 
    #navWrapper ul {display:inline-block;text-align:left} 
    #navWrapper li {display:inline}

Fuente

2009-11-29 10:47:42 wheresrhys

difícil saber sin ver exactamente lo que estás tratando de lograr pero esto se debe, al menos, ayudar a ...

Su CSS

#main { 
    width:100%; 
    text-align:center; 
} 

#nav { 
    margin:0 auto; 
} 

#nav ul li { 
    display:inline; 
} 

#content { 
    text-align:left; 
}

Su HTML

<div id="main"> 
    <!-- Your Navigation Menu --> 
    <div id="nav"> 
     <ul> 
      <li>Nav 1</li> 
      <li>Nav 2</li> 
      <li>Nav 3</li> 
     </ul> 
    </div> 
    <!-- Your Content Area --> 
    <div id="content"> 
     Lorem ipsum dolor sit amet, consectetur ... 
    </div> 
</div>

Fuente

2009-11-29 14:25:22 luckykind

esto funciona (hasta cierto punto :) No funciona donde yo lo intento, pero tendré que ir a través de los archivos css para ver si hay algún conflicto. Pero el cierto grado se refiere al centrado. Centra el lado izquierdo del contenido, por lo que el centrado está un poco apagado. He intentado añadir un relleno de 40px a la derecha en el interior #nav, pero eso significa que la adición de un valor estático a la ecuación.Aunque el 40px funciona, dependiendo del tamaño de los elementos tenderá a colgarse a un lado u otro – Daniel

sí ... como dije, es difícil de decir sin ver exactamente lo que estás haciendo ... pero suena como un conflicto con algún otro estilo ... esto definitivamente funciona por sí mismo, y desea evitar agregar valores estáticos si está tratando de centrar algo. Intente agregar temporalmente "border: 1px solid red;" a las áreas de problemas para que pueda ver mejor cómo se está diseñando ... – luckykind

aquí una buena solución para centering a div with no width.

no tiene table y funciona en cualquier navegador.

(EDIT: vínculo roto reemplazado con uno de archive.org Por cierto, la técnica descrita no es:.. Envolver su DIV en un lapso para que sea inline)

Fuente

2010-05-14 01:59:20 Snowalker

Nota: El enlace (referencia) proporcionado ya no está disponible. –

centrando un div sin establecer el ancho

Respuesta

Cuestiones relacionadas