-1

El título lo dice todo. Quiero poder centrar verticalmente el icono pero no lo consigo, se ve ligeramente hacia arriba.

div

      <div class="row">
    <div class="col-md-6 col-sm-12 d-flex">
      <i class="ms-3 fa fa-regular fa-align-center fa-briefcase p-2 bg-primary text-center text-light" aria-hidden="true"></i>
    </div>
    <div class="bg-danger p-2">EXPERIENCIA</div>
  </div>
2
  • 1
    Ya está centrado, es un icono cuadrado aunque no lo parezca. Lo que le ocurre es que el propio icono incorpora un espacio bajo el maletin que hace que parezca que suba ligeramente y no quede centrado.
    – masterguru
    Commented el 26 jul. 2022 a las 22:00
  • Es correcto, el ícono está centrado. Con el código proporcionado por el OP no se puede reproducir el error, pues es un centrado vertical exacto. Las respuestas, aunque aceptadas, son una mala práctica, los estilos en línea que buscan reemplazar el CSS de frameworks como BS, me parecen remedos de un desarrollador perezoso. Commented el 27 jul. 2022 a las 0:58

2 respuestas 2

0

Prueba así:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >

<div class="row">
    <div class="col-md-6 col-sm-12 d-flex">
        <div class="ms-3 p-2 bg-primary text-light">
            <i class="fa fa-solid fa-briefcase" style="padding-top:3px"></i>
        </div>
        
        <div class="bg-danger p-2">EXPERIENCIA</div>
    </div>
</div>

Estás cargado al elemento <i> de muchas clases lo cual no es recomendable, mejor sepáralo en un div, así como el ejemplo. El se queda con estas propiedades: ms-3 p-2 bg-primary text-light (espaciado, color de fondo azul, color de texto en blanco). mientras que <i> se queda con la clase que le convierte en icono.

Puedes modificar la propiedad padding-top para subir/bajar el elemento y centrarlo a tu gusto

0

Por lo que veo en tu ejemplo hay un div que no se cierra, pero lo que puedes hacer es tener tanto el div como el icono en un contenedor y poner los estilos display : flex y align-items : center de la siguiente manera.

<div style="display:flex; align-items:center;">
  <i class="ms-3 fa fa-regular fa-align-center fa-briefcase p-2 bg-primary text-center text-light" aria-hidden="true"></i>
  <div class="bg-danger p-2">EXPERIENCIA</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.