Alineación del centro CSS | TIEngranaje

Centrado con CSS puede ser un desafío para los diseñadores web. Esto se debe al hecho de que hay muchas formas diferentes de alinear, centrar y no todos los métodos trabajar en cada elemento.

Aprendiendo como centrar usando CSS es una buena idea porque el HTML <center> El elemento está en desuso y es posible que los navegadores web no lo admitan en el futuro. Las actividades de centrado y alineación más comunes incluyen:

• centrando el texto
• centrar un elemento de bloque
• centrando una imagen
• centrar verticalmente un elemento como un bloque o una imagen

Texto centrado

Centrar texto usando CSS es muy fácil y sencillo. Hay solo una propiedad lo que necesita saber para centrar el texto. la propiedad es text-align. Aquí hay un ejemplo.

div.centerText { 
    text-align: center;
}

En este ejemplo, cualquier elemento div al que se le haya asignado el center voluntad de clase centro horizontal el contenido de la div.

Debería nota que el text-align propiedad sólo se aplica a la texto dentro del elemento padre. El text-align propiedad no centra alinear el elemento padre en sí mismo.

Elementos del bloque central

Elementos de bloque de centrado también es bastante fácil de lograr. La forma correcta de centrar un elemento de bloque es establecer un width para el elemento y también establecer los márgenes izquierdo y derecho para auto. Aquí hay un ejemplo:

div.centerDiv {
    width: 60%;
    margin: 0px auto 0px auto;
}

Siempre que el elemento de bloque tenga un conjunto width, se centrará dentro de su elemento principal. Sin embargo, el texto contenido en el bloque no se centrará. Si necesitas el texto a centrar también, solo agregue el text-align propiedad también.

Centrado de imágenes

Asegurando que las imágenes están centradas a través de los navegadores es un poco más complicado. Si bien la mayoría de los navegadores mostrarán imágenes centradas usando el mismo text-align propiedad, no es una buena idea. Además, es no recomendado por el W3C.

En lugar de usar el text-align propiedad, debe usar apply display propiedad a la imagen y establecer la display a block en lugar de mostrar la imagen como inline. Una vez que la imagen es tratada como un block, es fácil centrarlo como hicimos en el ejemplo anterior. Aquí hay un ejemplo:

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Cualquier elemento de imagen que le asigne el center la clase será centrado horizontalmente dentro del elemento padre.

Elementos de centrado vertical

La versión actual de CSS (versión 2) no tiene soporte explícito para centrar elementos verticalmente en la página. Hay algunas formas de solucionar este problema, pero no funciona bien con versiones de Internet Explorer anteriores a la 8. El W3C recomienda te acercas a esto usando esta técnica:

1. Coloque los elementos que se van a centrar dentro de un elemento de bloque contenedor, como un div.
2. Establecer una altura mínima (min-height) en el elemento contenedor.
3. Declare que ese elemento contenedor es una celda de tabla (table-cell).
4. Establecer la alineación vertical (vertical-align) a middle.

.vCenter {
    min-height: 50px;
    display: table-cell;
    vertical-align: middle;
}

El truco consiste en especificar que el bloque tenga el formato de una celda de tabla porque el contenido de una celda de tabla se puede centrar verticalmente. Tenga en cuenta que los resultados pueden variar según el navegador.

.vCenter {
    min-height: 100px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Podemos ampliar esto e incluir algunas de las otras propiedades que se han cubierto en este artículo si también necesitamos centrar horizontalmente el elemento sobre la página y su contenido.

Si desea centrar horizontalmente el div, simplemente coloque este div dentro de otro div y centre horizontalmente el div exterior usando el width y margin técnica discutida anteriormente.