Centrar bloque en línea usando CSS

1. Use la propiedad CSS text-align para centrar el bloque en línea
2. Use las propiedades CSS justify-content y display para centrar el bloque en línea
3. Use la propiedad CSS izquierda, posición y transformar

En este artículo, crearemos varios elementos HTML y estableceremos su visualización en bloque en línea. Después de eso, aprenderemos a centrar todos los elementos con display: inline-block.

Use la propiedad CSS text-align para centrar el bloque en línea

En este ejemplo, hemos creado el elemento <div> con el nombre de clase padre. Dentro de ese elemento <div>, hemos agregado 3 elementos <div> más con el mismo nombre de clase llamados child.

Además, le hemos dado un color de fondo diferente a cada elemento <div> con el nombre de clase child.

Aquí, hemos establecido la display:inline-block para cada elemento con el nombre de clase child. Para centrar todos los elementos, hemos aplicado la propiedad text-align: center al elemento principal <div> con el nombre de clase parent.

En el resultado, los usuarios pueden ver que los tres elementos secundarios <div> están centrados en la página web.

Código HTML:

<div class="parent">
    <div class="child" style="background-color: green">First</div>
    <div class="child" style="background-color: red">Second</div>
    <div class="child" style="background-color: blue">Third</div>
</div>

Código CSS:

.parent {
    text-align: center;
}
.child {
    display: inline-block;
    font-size: 30px;
}

Use las propiedades CSS justify-content y display para centrar el bloque en línea

Usaremos las propiedades CSS justify-content y display en esta parte. Podemos usar el valor center para la propiedad justify-content para centrar todo el contenido del elemento.

Por ejemplo, hemos creado el elemento <div> con el nombre de clase container. Después de eso, agregamos tres etiquetas <p> con algo de texto dentro del elemento <div>.

Para mostrar todos los párrafos en una sola fila, podemos usar la propiedad display: flex de CSS en lugar de display:inline-block. Para centrar todos los elementos <p> a la vez, hemos aplicado la propiedad justify-content: center a la clase container, que es la clase padre de todos los elementos <p>.

Código HTML:

<div class="container">
    <p style="background-color: green">Welcome</p>
    <p style="background-color: red">To The</p>
    <p style="background-color: blue">DelftStack</p>
</div>

Código CSS:

.container {
    font-size: 30px;
    display: flex;
	flex-direction: row;
    justify-content: center;
}

Use la propiedad CSS izquierda, posición y transformar

Usaremos las propiedades CSS left, position y transform para centrar todos los elementos con display: inline-block. La propiedad left nos permite establecer la posición izquierda del elemento.

La propiedad transform mueve el elemento de su posición según nuestros requisitos. Podemos usar la propiedad posición para especificar el método de posicionamiento del elemento.

Por ejemplo, hemos creado un <div> con el nombre de clase exterior, y nuestro código contiene algunos elementos <p> con el nombre de clase interior. Para todos los elementos con el nombre de clase inner, hemos utilizado display: inline-block para mostrarlos en línea.

Hemos utilizado left: 50% para la clase outer y hemos establecido su posición en absolute para mover todo el <div> relacionado con su elemento principal, que es el elemento del cuerpo. Después de eso, usamos la propiedad transform: translate(-50%) para mover el elemento <div> con el nombre de clase outer en la dirección x negativa por el 50% de su ancho.

De esta forma podemos centrar el elemento <div> con el nombre de la clase outer.

Código HTML:

<div class="outer">
    <p class="inner" style="background-color: green">ABCD</p>
    <p class="inner" style="background-color: red">EFG</p>
    <p class="inner" style="background-color: blue">HIJ</p>
</div>

Código CSS:

.outer {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.inner {
    font-size: 30px;
    display: inline-block;
}

En este artículo hemos aprendido varios métodos para centrar los elementos con display: inline-block.