Centro div horizontalmente

En this page, me gustaría centrar horizontalmente el principal #container div relativo a la página. Normalmente me conseguir esto mediante la adición de una regla CSS,Centro div horizontalmente

#container { margin: 0 auto }

Sin embargo, el diseño de esta página (que no he escrito), utiliza la colocación absoluta para #container y la mayoría de sus elementos secundarios, por lo que esta propiedad tiene sin efecto.

¿Hay alguna forma en que pueda lograr este centrado horizontal sin reescribir el diseño para usar el posicionamiento estático? No tengo problemas con el uso de JavaScript/JQuery si esa es la única manera de lograr mi objetivo.

Fuente

2011-01-12 Dónal

¿Está utilizando la secuencia de comandos correcta? – Starx

@Starx buena pregunta, actualicé mi publicación con la respuesta (que es sí) –

en ese caso @rquinn tiene la respuesta para usted – Starx

Igual que @rquinn answer pero esto se ajustará a cualquier ancho. Marque esta demostración

http://jsfiddle.net/Starx/V7xrF/1/

HTML:

<div id="container"></div>

CSS:

* { margin:0;padding:0; } 
#container { 
    width:50px; 
    position:absolute; 
    height:400px; 
    display:block; 
    background: #ccc; 
}

Javascript

function setMargins() { 
    width = $(window).width(); 
    containerWidth = $("#container").width(); 
    leftMargin = (width-containerWidth)/2;  
    $("#container").css("marginLeft", leftMargin);  
} 

$(document).ready(function() { 
    setMargins(); 
    $(window).resize(function() { 
     setMargins();  
    }); 
});

Fuente

2011-01-12 09:36:52 Starx

@ Don, ¿Por qué no has aceptado una respuesta? Te gustó, ¿verdad? : D – Starx

el ancho del contenedor es 1024px, por lo que puede tratar de dar un valor izquierdo del 50% y margen izquierdo: -512px.

Fuente

2011-01-12 07:52:14

esto no funcionaría en la pantalla con 800px ¿verdad? o 1280, o 1360 ........ SO EN – Starx

¿por qué no? Puedes intentar cambiar el tamaño de tu ventana. –

funcionará en pantallas más grandes, pero en las más pequeñas, el usuario no podrá ver toda la imagen. (No podrá desplazarlos a la vista) – Dan

Al usar Javascript, colocará #container en el centro de la ventana de su navegador.

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px'; 
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px';

Fuente

2011-01-12 08:13:49 Alejandro

Se puede utilizar también el uso de jQuery:

function setMargins() { 
    var width = $(window).width(); 
    if(width > 1024){ 
     var leftMargin = (width - 1024)/2; 
     $("#container").css("marginLeft", leftMargin);  
    } 
}

Entonces me puso este código después de la $(document).ready evento:

$(document).ready(function() { 

    setMargins(); 

    $(window).resize(function() { 
     setMargins();  
    }); 
});

Fuente

2011-01-12 08:32:17

Si su contenedor principal está utilizando absolute posición, puede utilizar este CSS para centrarlo horizontalmente;

#container { 
    position:absolute; 
    width:1000px; /* adjust accordingly */ 
    left:50%; 
    margin-left:-500px; /* this should be half of the width */ 
}

Fuente

2011-01-12 08:36:58 Sarfraz

Es muy sencillo. Prueba este

body { 
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */ 
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */ 
} 

#Content { 
    width:500px; 
    margin:0px auto; /* Right and left margin widths set to "auto". */ 
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
}

Fuente

2011-01-12 12:32:58

Pero, ¿funcionará si los elementos #Content y sus elementos hijo están absolutamente posicionados? –

esto funcionará incluso para elementos secundarios si es posible me pueden dar más detalles –

De esta manera funcionó mejor para mí. Sin cambiar los márgenes, pero la posición. Obligatorio: objeto -> margen-izquierda: 0; y posición: relativa;

ejemplo cheque aquí: jsfiddle Código:

function setObjPosition(container, object) { 
    var containerWidth = $(container).width(); 
    var objectWidth = $(object).width(); 

    var position = (containerWidth/2) - (objectWidth/2); 

    $(object).css('left', position); 
} 

function setPositionOnResize(container, object) { 
    setObjPosition(container, object); 
    $(container).resize(function() { 
     setObjPosition(container, object); 
    }); 
}

Uso:

<script type="text/javascript"> 
    $(document).ready(function() { 
     setPositionOnResize(window, "#PanelTeste"); 
    }); 
</script>

Puede estar centrado dentro de cualquier contenedor.

Fuente

2015-09-03 22:13:13

Respuesta

Cuestiones relacionadas