Como hacer un align centro div en HTML

Duplicar posibles:
How to center a div in a div?Como hacer un align centro div en HTML

Una forma sencilla de hacer un objeto centrado en HTML está utilizando align='center', pero no está trabajando para una div.

me trataron:

style='text-align:center'; 
style='left:50%';

Me cierto incluso una etiqueta centro

<center>

pero no puedo hacer que mi div Meta Se central.

Fuente

2010-04-22 Mac Taylor

¿Está tratando de centrar el div mismo, o el texto dentro del div? – Welbog

dije en mi pregunta un div no su texto. gracias –

Establezca un ancho para el 'div ', luego use' margin: 0 auto; ': http://jsfiddle.net/spikey/FLL5Z/ – uSeRnAmEhAhAhAhAhA

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Center</title> 
 
    </head> 
 
    <body> 
 

 
    <div style="text-align: center;"> 
 
     <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div> 
 
    </div> 
 

 
    </body> 
 
</html>

probado y trabajaron en IE, Firefox, Chrome, Safari y Opera. No probé IE6. La alineación de texto externa es necesaria para IE. Otros navegadores (¿y IE9?) Funcionarán cuando proporcione el valor de margen DIV (izquierda y derecha) de automático. Margen "0 automático" es una abreviación para el margen "0 automático 0 automático" (arriba a la derecha, abajo a la izquierda).

Nota: el texto también se centra dentro del DIV interno, si desea que permanezca en el lado izquierdo simplemente especifique text-align: left; para el DIV interior.

Edición: IE 6, 7, 8 y 9 ejecutándose en el modo estándar trabajará con los márgenes establecidos en automático.

Fuente

2010-04-22 13:28:01 Tower

necesito configurar mi porcentaje de div no corregido píxel, creo que si establezco el ancho al 95%, no sería el centro –

¿cómo sabes que su div está en posición relativa o estática? – meo

@Mac: esta técnica funciona muy bien para un ancho de porcentaje. Sin embargo, en general, para que el margen automático funcione, debe estar en el modo estándar, para lo cual necesitará una declaración ''! DOCTYPE' apropiada. La solución alternativa parent-text-align-center funcionará para el modo Quirks, pero no desea escribir nada hoy en el modo Quirks. – bobince

-1

¿qué hay algo en este sentido

<style type="text/css"> 
    #container { 
    margin: 0 auto; 
    text-align: center; /* for IE */ 
    } 

    #yourdiv { 
    width: 400px; 
    border: 1px solid #000; 
    } 
</style> 

.... 

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

Fuente

2010-04-22 13:29:31 espais

Esto no funcionará en otros navegadores o en el modo estándar, ya que los márgenes automáticos deberían estar en el mismo elemento que el ancho. – bobince

funciona bien para mí en modos distintos a Quirks, no entiendo la votación descendente constante – espais

Creo que la del align="center" alinea el contenido, por lo que si quieres usar ese método, que se necesita para utilizarlo en un 'wraper' div - una div que simplemente envuelve el resto.

text-align está haciendo un tipo similar de cosas.

left:50% se ignora a menos que establezca la posición del div como algo relativo o absoluto.

Los métodos generalmente aceptados es el uso de las siguientes propiedades

width:500px; // this can be what ever unit you want, you just have to define it 
margin-left:auto; 
margin-right:auto;

los márgenes que se Auto significa que crecen/encogimiento para que coincida con la ventana del navegador (o div padre)

ACTUALIZACIÓN

Gracias a Meo por afirmar esto, si lo desea puede ahorrar tiempo y usar la mano derecha para el margen.

margin:0 auto;

esto define la parte superior e inferior como 0 (ya que es cero, no importa acerca de la falta de unidades) y la izquierda ya la derecha obtener define como 'auto' Usted puede entonces, si quieres probar anulación di el margen superior como lo harías con cualquier otra regla de CSS.

Fuente

2010-04-22 13:32:32 thecoshman

puede usar estilos en línea para el margen ... margin: 0 auto; – meo

problema es IE que no puede mostrar div exactamente centrado; intenté margin-left-right: auto pero no funcionó en IE –

@meo Un punto justo. Por lo general, sería mejor tomar su consejo, ya que ayuda a reducir el tamaño del archivo, no mucho de lo que sé, pero todo ayuda. Aunque para la guía, ayuda a explicar las propiedades 'requeridas' para que funcione. – thecoshman

que depende si su div está en la posición: absoluto/fijo o relativa/static

para la posición: absoluta & fijado

<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>

El truco aquí es tener un margen negativo la mitad de la anchura de el objeto

para la posición: relative & estática

<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>

para ambas técnicas es imprescindible establecer el ancho

Fuente

2010-04-22 13:34:59 meo

Como hacer un align centro div en HTML

Respuesta

Cuestiones relacionadas