En HTML, los íconos de las redes sociales son los enlaces a los sitios de redes sociales, representados en imágenes vectoriales. Estos íconos le permiten saltar en los sitios de redes sociales haciendo clic en ellos. CSS le permite personalizarlos de acuerdo con sus preferencias. Existen diferentes propiedades que se utilizan para personalizar imágenes vectoriales de iconos, como color, decoración de texto, tamaño de fuente y muchas más. También puede establecer la alineación de los íconos de las redes sociales.

En este artículo, aprenderemos el método para centrar los íconos de las redes sociales usando:

• "texto alineado"
• "margen"
• "red"
• "doblar"

Para alinear los íconos de las redes sociales en el centro del elemento HTML, primero, es importante aprender el método agregar íconos de redes sociales en HTML. Para hacerlo, siga los pasos dados.

Paso 1: Agregar íconos de redes sociales en HTML

Para agregar los íconos de las redes sociales en el HTML, primero agregue el siguiente enlace dado en el encabezado del HTML. Este es un enlace a la biblioteca en línea llamada "asombroso"Solía ​​buscar íconos. Hay más de 1600 iconos vectoriales que puede usar libremente en su sitio web y personalizarlo fácilmente utilizando CSS.

Html

Después de agregar el enlace en el encabezado de HTML, crearemos un contenedor con la clase llamada "div"Y agregue el encabezado

Dentro de la etiqueta. Aquí, crearemos un sub-Div y asignaremos el nombre de clase como "íconos".

Dentro del subdiv, agregaremos cuatro iconos usando la etiqueta. En "href", Daremos los enlaces de los iconos y definiremos el nombre de clase del icono desde donde se obtienen los íconos. Aquí, usaremos dos clases ","fa"Y los íconos relacionados como"FA-Twitter". El "fa" representa "asombroso" y "FA-Twitter"Es el nombre del icono. Usando el mismo método, haremos otros tres iconos en el sub-Div:

Íconos de redes sociales centrales

Puede ver que los íconos de las redes sociales se agregan en el DIV:

Ahora, pasaremos al siguiente paso para diseñar los íconos de Div y las redes sociales.

Paso 2: íconos de estilo de divisas y redes sociales con CSS

En el archivo CSS, use ".div"Para acceder al contenedor creado en HTML. Aquí, establece la altura del Div como "250px". Para peinar el div, agregue un color de fondo como "RGB (0, 0, 0)"Y establece el ancho de la frontera como"7px", Estilo como"doble", Y color como"RGB (2, 217, 255)". También estableceremos el color del encabezado como "RGB (2, 217, 255)".

CSS

.div
Altura: 250px;
Antecedentes: RGB (0, 0, 0);
borde: 7px doble rgb (0, 217, 255);
Color: RGB (0, 217, 255);

Aquí, puedes ver que el Div tiene el estilo pero los íconos aún tienen el mismo estilo:

Ahora, peinaremos los iconos usando CSS.

Para hacerlo, usaremos ".fa"Para acceder a los cuatro íconos y diseñarlos en consecuencia. Estableceremos el tamaño de fuente de los iconos como "30px"Ancho como"30px"Para crear espacio entre los iconos y el"decoración de texto"Propiedad como"ninguno"Para eliminar el subrayado de los enlaces.

Después de eso, usaremos la segunda clase de los iconos ".FA-Twitter",".fa-whatsapp",".fa-snapchat" y ".FA-Instagram"Para establecer el color de estos íconos de manera diferente. Aquí, estableceremos el color del ícono de Twitter como "RGB (28, 150, 232)", Whatsapp como"RGB (69, 198, 85)", Snapchat como"RGB (247, 247, 0)", E Instagram como"RGB (246, 1, 140)":

.fa
tamaño de fuente: 30px;
Ancho: 30px;
Decoración de texto: ninguna;

.FA-Twitter
Color: RGB (28, 150, 232);

.fa-whatsapp
Color: RGB (69, 198, 85);

.fa-snapchat
Color: RGB (247, 247, 0);

.FA-Instagram
Color: RGB (246, 1, 140);

La siguiente imagen muestra que tanto Div como los iconos están diseñados:

Paso 3: Iconos centrales de redes sociales utilizando CSS

Ahora, pasaremos al siguiente paso en el que tenemos que centrar alinear los íconos de las redes sociales utilizando cuatro métodos diferentes. Entonces. Comencemos con el primero.

Método 1: Iconos de redes sociales centrales que usan "Alineación de texto"

Para centrar los íconos de las redes sociales, usaremos el "texto alineado"Propiedad de CSS. Especifica la alineación horizontal del texto en los elementos HTML, como la alineación de la izquierda, la derecha, el centro y la justificación.

Sintaxis

La sintaxis de la propiedad de alineación de texto es:

Text-Align: Izquierda | Derecha | Centro | Justificar

La descripción de los valores proporcionados anteriormente se da a continuación:

• izquierda: Es el valor predeterminado de la propiedad de alineación de texto utilizada para ajustar el texto en el lado izquierdo del elemento HTML.
• bien: Se utiliza para alinear el texto en el lado derecho del elemento.
• centro: Especifica la alineación central del texto.
• justificar: Al usarlo, las palabras se extienden en una línea completa.

Como continuación del ejemplo anterior, alineemos los íconos de las redes sociales en el centro del div.

Ejemplo

En CSS, usaremos el ".icono"Para acceder al contenedor creado en el que hemos agregado iconos de redes sociales y luego establecer el valor de la propiedad de alineación de texto como"centro":

.iconos
Text-Align: Center;

La imagen proporcionada a continuación indica que los íconos de las redes sociales se alinean en el centro del Div:

Método 2: Iconos de redes sociales centrales que usan "cuadrícula"

"red"Se usa para ajustar el elemento en un recipiente de cuadrícula. Puedes usar el "mostrar"Propiedad y establece sus valores como la cuadrícula para alinear los iconos de redes sociales adicionales.

Sintaxis

La sintaxis de la propiedad de visualización es:

Pantalla: cuadrícula;

Continuemos el ejemplo y alineemos los íconos de las redes sociales.

Ejemplo

Aquí, estableceremos el valor de la propiedad de visualización como "red"Para mostrar íconos en forma de cuadrícula. Luego, cree cuatro columnas usando el "columnas de plantilla de cuadrícula"Propiedad y establecer su valor como"auto"Para permitir que el navegador calcule el ancho por sí mismo. Utilizaremos el "brecha de columna"Propiedad para crear una brecha entre las columnas y establecer su valor como"10px". Después de eso, establezca el valor de la propiedad Justify-Content como "centro"Para mostrar el contenedor de cuadrícula en el centro del Div:

.iconos
Pantalla: cuadrícula;
Columna de plantilla de cuadrícula: auto auto auto auto;
columna-gap: 10px;
Justify-Content: Center;

Nota: El "mostrar","columnas de plantilla de cuadrícula" y "brecha de columna"Se han utilizado para establecer los íconos en un contenedor de cuadrícula y el"Justify-Content"Se utiliza para mostrar el contenedor de la cuadrícula en el centro del Div.

Puede ver que los íconos de las redes sociales se muestran en el centro del Div:

Método 3: Iconos de redes sociales centrales que usan "margen"

Para centrar los íconos de las redes sociales, el "margenSe puede utilizar la propiedad de CSS. Esta propiedad se utiliza para crear un área transparente alrededor de un elemento. Le permite establecer el margen de un elemento desde los lados izquierdo, derecho, superior e inferior. Es una propiedad taquigrafía de "margen de pesa","margen de derecha","margen-top", y "margen" propiedades. Puede establecer los cuatro valores en una sola línea usando el "margen" propiedad.

Sintaxis

La sintaxis de la propiedad de margen se proporciona a continuación:

Margen: Longitud | Auto

La descripción de la sintaxis proporcionada anteriormente de la propiedad de margen se proporciona a continuación:

• longitud: Se usa para establecer el margen manualmente desde el lado izquierdo, derecho, superior e inferior del elemento.
• auto: Permite que el navegador establezca el margen alrededor de un elemento por sí mismo.

Ejemplo

Continuaremos los ejemplos anteriores y cambiaremos los valores de la propiedad fronteriza para darle al DIV un aspecto diferente. Para hacerlo, establezca el valor de la propiedad de margen como "auto"Y ancho como"contenido de ajuste"Para alinear los íconos exactamente en el centro del Div:

.iconos
margen: auto;
Ancho: Fit-Content;

El código proporcionado mostró que los íconos de las redes sociales se alinearon en el centro del Div:

Método 4: Iconos de redes sociales centrales que usan "Flex"

En CSS, "doblar"¿Es el valor establecido para la propiedad de visualización. Permite que el contenido o los elementos sean flexibles y ajustables. El valor flexible de CSS asegura que los elementos se organicen de manera eficiente creando un espacio igual entre ellos.

Sintaxis

Pantalla: Flex

En la sintaxis dada anteriormente, "doblar"Se especificará como el valor del"mostrar" propiedad.

Ejemplo

Utilizaremos la propiedad de visualización como "doblar"Y establece la brecha entre los íconos como"5px" utilizando el "brecha" propiedad. Después de eso, use Justify-Content y establezca su valor como "centro":

.iconos
Pantalla: Flex;
Gap: 5px;
Justify-Content: Center;

Usando el código anterior, se obtiene la siguiente salida:

También puede establecer los íconos de las redes sociales en el centro del div tanto vertical u horizontalmente utilizando el "doblar"Valor para la propiedad de visualización. Para hacerlo, use el "alinearse"Propiedad como"centro"Y establece la altura como"250px”Para mostrar el icono verticalmente en el Div:

.iconos
…
Alineación de ítems: Centro;
Altura: 250px;

Aquí está el resultado que demuestra que los íconos de las redes sociales están en el centro del div tanto vertical como horizontalmente:

Eso es todo! Explicamos el método para centrar los íconos de las redes sociales utilizando cuatro métodos diferentes.

Conclusión

Los íconos de las redes sociales están alineados en el centro del DIV utilizando cuatro métodos diferentes de CSS, que son los "red" y "doblar"Valores de la propiedad de visualización, el"texto alineado" y "margen" propiedades. También puede establecer el centro de iconos de redes sociales verticalmente utilizando el "doblar"Valor de la propiedad de visualización. En esta guía, hemos explicado estos cuatro métodos en detalle y proporcionamos ejemplos de cada método para centrar los íconos de las redes sociales utilizando CSS.
[/cc]