Los seres humanos anhelan la simetría, dentro y fuera de línea. Esta preferencia es tan fuerte que en realidad es cableado en nuestro sistema nervioso y lo ha sido durante miles de años.
La simetría no significa que las cosas tengan que ser idénticas a ambos lados de un eje. Hay varias formas de crear simetría en un sitio web, y la que discutiremos en este artículo es el equilibrio.
Lograr el equilibrio en su sitio web depende en gran medida de la alineación de los elementos en una página. Centrar elementos, en particular elementos grandes como imágenes, puede ayudar a que su diseño se vea ordenado y agradable a la vista. El proceso no es difícil, pero varía dependiendo de si los elementos están en línea o en bloque. Existen algunas diferencias entre estos tipos de elementos, pero la principal diferencia es cómo afectan el flujo de una página.
En este artículo, cubriremos todo lo que necesita saber sobre el centrado de imágenes (o cualquier elemento en línea), que incluye:
Elementos en línea vs. bloque
Los elementos de bloque funcionan interrumpiendo el flujo, mientras que los elementos en línea funcionan yendo con el flujo. Eso significa que los elementos de bloque comienzan en una nueva línea y ocupan todo el ancho de la ventana gráfica. Los elementos en línea, por otro lado, no comienzan en una nueva línea ni ocupan todo el ancho de la ventana gráfica. Por supuesto, el ancho y el estilo de estos elementos pueden cambiar si lo especifica CSS, pero este es su valor predeterminado.
He aquí un ejemplo para ayudar a visualizar estas diferencias. Debajo verás un Botón de arranque diseñado como un elemento en línea y un elemento de bloque.
Estos diferentes tipos de elementos requieren diferentes métodos para alinearlos. Mientras que los métodos para centrar un elemento div, por ejemplo, se puede usar para todos los elementos de bloque, no se pueden aplicar a las imágenes. Eso es porque las imágenes son elementos en línea.
A continuación, veremos el proceso para centrar una imagen (o cualquier elemento en línea) en HTML y CSS. Este proceso funcionará ya sea que esté construyendo desde cero o usando un marco como Bootstrap CSS. Empecemos.
Comprender HTML y CSS al centrar una imagen
Antes de discutir las diferentes formas de centrar una imagen, es importante aclarar qué «en HTML” en realidad significa.
Érase una vez, había un elemento de centro HTML. Este era un elemento a nivel de bloque que automáticamente centraba cualquier bloque o elemento en línea que contuviera. Entonces, centrar una imagen requeriría una sola línea de HTML que se viera así:
<center><img src="https://blog.hubspot.com/website/image1.jpg" alt="centered image" height="598" width="398"> </center>
Sin embargo, este elemento quedó obsoleto en HTML4. Ahora eso HTML5 es el estándar, es probable que esta etiqueta obsoleta no se muestre en ningún navegador moderno.
Y qué es el proceso para centrar una imagen en HTML? Lo más importante que debe entender es que centrar una imagen hoy requerirá que añadir CSS a HTML. Ya no puedes usar HTML exclusivamente.
Se recomienda mantener su HTML separado de su CSS colocando su HTML en la sección del cuerpo de un documento HTML y el CSS en la sección principal o en una hoja de estilo externa. Si no puede separarlos por alguna razón, tal vez la plataforma de creación de sitios web que está utilizando los mantiene juntos en el editor de código fuente, por ejemplo, entonces tendrá que usar CSS en línea.
El CSS en línea está incrustado en el HTML en la sección del cuerpo. El CSS se define dentro del atributo de estilo del elemento al que se dirige. La sintaxis es similar a la de CSS interno y externo: la propiedad CSS se nombra y se le asigna un valor de propiedad, pero con CSS en línea, este conjunto de reglas está encerrado entre apóstrofes en lugar de corchetes.
Aquí hay un ejemplo. Digamos que quieres cambiar el color del texto del primer encabezado de su página en rojo y deje los otros encabezados como están. Luego, establecería la propiedad de color en el código de color hexadecimal para rojo (#FF0000), colóquelo dentro del atributo de estilo y coloque todo dentro de la etiqueta h2. Compruébalo a continuación.
Aquí está el HTML:
<h2 style="color: #FF7A59;">Inline CSS Example</h2>
<p>In this example, the inline CSS is used to style the above heading and no other headings on the page.</p>
<h2>Unstyled Heading</h2>
<p>Notice the heading above is not styled.</p>
Así es como se vería en la parte delantera:
Digamos que desea usar ese mismo CSS pero colocarlo en la sección principal o en una hoja de estilo externa. Reemplazaría el atributo de estilo en su HTML con un Selector de CSS. En el siguiente ejemplo, se utiliza un selector de ID.
Aquí está el HTML:
<h2 id="first-heading">Internal CSS Example</h2>
<p>In this example, the internal CSS is used to style the above heading and no other headings on the page.</p>
<h2>Unstyled Heading</h2>
<p>Notice the heading above is not styled.</p>
Aquí está el CSS interno:
#first-heading {
color: #FF7A59;
}
Nota: Así es como se vería el CSS en una hoja de estilo externa.
El resultado en la parte frontal es el mismo, como se muestra a continuación:
Ahora que entendemos las diferentes formas en que puede escribir CSS, veamos cómo puede centrar una imagen usando HTML y CSS.
Cómo centrar una imagen en CSS
Hay varias formas de centrar una imagen, dependiendo de si desea centrarla horizontal o verticalmente. Comenzaremos viendo cómo centrar una imagen horizontalmente.
Cómo centrar horizontalmente una imagen
Hay tres formas de centrar una imagen horizontalmente. El primero funciona mejor para imágenes más pequeñas y el segundo para imágenes más grandes. El tercero funciona mejor si está utilizando el modelo de diseño receptivo Caja flexible.
Cubriremos los tres para que pueda centrar cualquier imagen, sin importar el tamaño, en su sitio web.
Método 1: usar la propiedad Text-Align
Para centrar una imagen horizontalmente, puede usar la propiedad de alineación de texto CSS.
Paso 1: Dado que esta propiedad solo funciona en elementos a nivel de bloque y no en elementos en línea, comencemos por envolver la imagen en un elemento de bloque.
Paso 2: Envuelva la imagen en un div y luego aplique el atributo de estilo con la propiedad de alineación de texto establecida en el centro. Es simple, pero solo funciona si la imagen es más pequeña que su ventana gráfica.
Aquí está el HTML con CSS en línea:
<h2>How to Center an Image with the Text Align Property</h2>
<p>In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the text align property to center the image below. This is the simplest but most limited method: it only works if the image is smaller than the viewport.</p>
<div style="text-align: center;">
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
Así es como se vería en la parte delantera:
Método 2: usar la propiedad de margen
Digamos que tiene una imagen muy grande que desea centrar. En ese caso, envolver la imagen en un elemento de bloque no sería la mejor opción. En su lugar, querrá definir la imagen con la propiedad de visualización CSS y establecerla en «bloquear». Aquí se explica cómo centrar una imagen usando la propiedad de margen.
Paso 1: Antes de establecer los márgenes, establezca el ancho de la imagen en una cantidad fija para que no abarque la ventana gráfica. En este caso, usaré el valor porcentual del 60%.
Paso 2: Establezca la propiedad de margen de CSS definiendo la imagen con la propiedad de visualización de CSS y configúrela en «bloquear». Esto le indicará al navegador que trate la imagen como si fuera un elemento de bloque, no un elemento en línea, lo que le permitirá usar la propiedad de margen CSS.
Paso 3: Establezca los márgenes izquierdo y derecho en «automático» para que sean iguales.
Aquí está el CSS:
img {
display: block;
width: 60%;
margin-left: auto;
margin-right: auto;
}
Aquí está el HTML:
<h2>How to Center an Image with the Margin Property</h2>
<p>In this example, the CSS margin and display properties are used to center the image below.</p>
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" width="200" height="150">
<p>Once the display property is set to "block" and the image width to a fixed percentage, the margins on the left and right are set to "auto." That means the remaining blank space of the viewport will be split equally on both sides.</p>
Así es como se vería en la parte delantera:
Método 3: usar la propiedad Flex
También puede centrar una imagen horizontalmente usando la propiedad flex, que no requiere cálculos de margen.
Paso 1: Envuelva la imagen en un elemento div.
Paso 2: Establezca la propiedad de visualización en «flex», lo que le dice al navegador que el div es el contenedor principal y la imagen es un elemento flexible.
Paso 3: Establezca la propiedad de justificar el contenido en «centro».
Etapa 4: Establezca el ancho de la imagen en un valor de longitud fijo.
Aquí está el CSS:
div {
display: flex;
justify-content: center;
}
img {
width: 200px;
}
Aquí está el HTML:
<h2>How to Center an Image with the Flex Property</h2>
<p>In this example, the CSS flex property is used to center the image below. The image is wrapped in a div element. The display property is set to "flex" and justify-content property to "center." The width of the image is then set to a fixed length value.</p>
<div>
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
Así es como se vería en la parte delantera:
Cómo centrar verticalmente una imagen
Centrar cualquier elemento verticalmente es más difícil que horizontalmente, pero aun así es factible. Para las demostraciones a continuación, usaré CSS interno.
Método 1: usar la propiedad de posición
Para centrar una imagen verticalmente, puede envolverla en un elemento de bloque como un div y usar una combinación de los Propiedad de posición CSSlas propiedades left y top, y la propiedad transform.
Paso 1: Comience configurando la posición del div que contiene la imagen en absoluto para que se elimine del flujo normal del documento.
Paso 2: Establezca las propiedades izquierda y superior al 50%. Esto le dice al navegador que alinee el borde izquierdo y superior del div que contiene la imagen con el centro de la página horizontal y verticalmente (es decir, 50% a la derecha y hacia abajo de la página).
Aquí está el problema: tener los bordes del div alineados en el medio de la página hará que el div se vea descentrado.
Ahí es donde el Propiedad de transformación CSS viene en.
Paso 3: Para centrar verdaderamente el div que contiene la imagen, puede usar el método translate() para mover el div a lo largo de los ejes X e Y. Específicamente, desea mover el div 50% hacia la izquierda y hacia arriba desde su posición actual para que el centro de la imagen se alinee con el centro de la página. Para moverse hacia la izquierda y hacia arriba, deberá usar valores negativos.
Aquí está el CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Aquí está el HTML:
<h2>How to Center an Image Vertically</h2>
<p>In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the position, left, top, and transform properties to center the image below. </p>
<div class="center">
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" width="200" height="140">
</div>
Así es como se vería en la parte delantera:
Método 2: usar la propiedad Flex
Paso 1: Para centrar una imagen horizontal y verticalmente con Flexbox, comience envolviéndola en un elemento de bloque como un div.
Paso 2: Defina este div como un contenedor flexible configurando la propiedad de visualización en «flex».
Paso 3: Defina las propiedades de alineación de elementos y justificación de contenido en «centro». Esto le indicará al navegador que centre el elemento flexible (la imagen dentro del div) vertical y horizontalmente.
Etapa 4: Establezca la altura del HTML, el cuerpo y el contenedor principal al 100 %.
Aquí está el CSS: