Centrar cualquier elemento horizontal en CSS

En este artículo, vamos a aprender cómo para centrar cualquier elemento horizontal usando CSS ? Aquí tenemos algunos ejemplos que se utilizan para organizar elementos de alineación horizontal .

CSS es fresco. Diseñar con CSS se siente como se le proporciona un conjunto adecuado de herramientas para mostrar su creatividad. Nuevos diseñadores a menudo se encuentran atrapados cuando algo no va de acuerdo con ellos.

Uno de estos problemas es con los elementos que no se alinean en el centro horizontal del elemento padre. elemento de centrado es bastante sencillo , una vez que determinar qué tipo de elemento que desea centro.

elementos de centrado Inline

Los elementos en línea son los elementos que van con el flujo de contenido. Considerando que, con elemento de bloque ocupa nueva línea y el espacio hasta la anchura del elemento padre.

Considere este ejemplo,

<p>Hi this is a <a href="google.com">Hyperlink</a> example</p>

Ahora, a centro de este tipo de simplemente aplicar el text-align: propiedad del centro de y funciona . Simple, derecho ?

elementos de centrado a nivel de bloque

La razón de que estos elementos no están centrados porque no van a seguir la regla de text-align: Centro . Son elementos de bloque. Ocupan nueva línea y el espacio igual a la anchura del elemento padre.

Para centrar el elemento de bloque , tenemos que definir un tamaño y luego aplicar la propiedad de margen.

Código:

.block-element {
width: 200px;
margin: auto;
}

Primera , vamos a discutir sobre el margen : auto propiedad, que establece el margen de automóviles. Esta propiedad establece los márgenes tanto de izquierda y derecha para auto. Esto significa que tanto la izquierda y la derecha los márgenes serán iguales, que es cómo un elemento centros.

Pero, no va a trabajar directamente. Como usted sabe, el elemento de bloque ocupa ancho de 100%, el elemento en su conjunto se centra class CSS. Así que tenemos que reducir el ancho con el fin de trabajo. Ahora ya que la anchura es menor que el ancho del contenedor principal, la propiedad diferencial será igualar los márgenes izquierdo y derecho, y así es como se obtiene elemento de bloque en el centro.

Aquí es una demo,

DEMO

salida

Center any element horizontally in CSS - 4

código HTML con el CSS

<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS center elements example</title>
<!-- CSS code below -->
<style>
.inline {
text-align: center;
}
.box {
width: 200px;
height: 100px;
background: #ddd;
margin: auto;
}
</style>
</head>
<body>
<h2>CSS Centering elements example</h2>
<h3>1. Inline element</h3>
<p class="inline">Just apply the text-align:center to make it in center like this</p>
<h3>2. Block Element</h3>
<div class="box">
<p class="inline">The block element with custom width and auto margin at the center of the page</p>
</div>
</body>
</html>

Esperanza usted tiene gusto del artículo. class artículos más impresionantes estancia sintonizado.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *