-
Cómo centrar una etiqueta DIV en la página con CSS
-
Ya que el código Cascading Style Sheet entró en uso común, los diseñadores Web cayeron técnicas de la tabla de codificación en favor de diseños basados en CSS. La confusión rodea las técnicas necesarias para el posicionamiento <div> y etiquetas similares usando CSS, sin embargo. Esto se debe a que no existe una manera sencilla de hacer las cosas simples, como el centrado elementos de las páginas. Se puede centrar <div> en CSS mediante la manipulación y el establecimiento de márgenes anchos, y el establecimiento de la alineación del texto en un <div> que contiene todo lo que hace trabajar incluso en Internet Explorer 6.Instrucciones
1 Utilice un editor de código como jEdit, BBEdit o Notepad ++ para abrir su archivo HTML de la página que contiene el <div> desea centrar. Busque el <div> desea centrar y tomar nota de su atributo ID. Si usted no ve un atributo ID en la etiqueta <div>, añadir de esta manera:
<Div id = "centrado"> contenido ... </ div>
Puede nombrar el atributo ID lo que quiera, pero elegir un nombre que es único y significativo.
2 Añadir un contenedor <div> alrededor de la <div> desea centrar. Esta etiqueta <div> creará un espacio especial en la página donde se puede centrar cualquier cosa que desee, incluso un elemento anidado <div>. Aquí hay un ejemplo:
<Div id = "contenedor">
<Div id = "centrado"> contenido ... </ div>
</ Div>
Nombre del contenedor <div> lo que quiera, pero la mayoría de los diseñadores utilizan nombres como "contenedor" o "envoltura". Asegúrese de que el atributo ID no entre en conflicto con cualquier otro ID de etiquetas HTML en el archivo HTML, sin embargo.
3 Añadir el código CSS para centrar la etiqueta <div>. Usted debe agregar este código en un archivo .css externo, y si su sitio web ya utiliza uno, verá un código como éste entre sus etiquetas <head>:
<Link rel = "stylesheet" href = "style.css" type = "text / css">
Si ve que el código, a continuación, abrir el archivo "style.css". También puede agregar <style> y </ style> etiquetas entre las etiquetas <head> y añadir código entre ellos, pero luego el código CSS solo tendrá efecto en el archivo HTML en el que añadió el código.
4 Utilizar el código CSS para centrar un <div> que contiene dentro de un <div>:
envase {text-align: center;} centra {margin-left: auto; margin-right: auto; Anchura: 200px; text-align: left;}
Dar la que contiene <div> una alineación centrada para que la pantalla centrada <div> correctamente en Internet Explorer 6. Use márgenes de auto centrado en el <div> para centrarla en los navegadores modernos. Se debe añadir una anchura a la centrada <div> para el centrado de trabajar. Restablecer la alineación del texto de modo de texto, tampoco se centra.
