Search code examples
javascripthtmlcssbootstrap-4figma

Icon not aligning vertically center in html Bootstrap 5

I am currently new to Css google icon is not getting align center vertticaly giving some padding from bottom you can see in attached file...text is aligned center

.g-icon{
background-image: url("../../assets/imgs/googles.png");
background-repeat: no-repeat;
height: 28px;
width:28px;}

for html

 <div class="text-center pl-3 pt-3 pb-3 shadow bg-white rounded reg-head">
   <i class="g-icon  d-flex align-items-center"></i>
     <div class="reg">
      <label class=" mx-0 my-0"> Register with Google</label>
     </div>
  </div>

Here is my screen short Output for css code

Solution

  • I offer you two possibilities:

    1. In css you can use the property "float" to stick your text and your google icon. See: https://developer.mozilla.org/fr/docs/Web/CSS/float

    2. You can place your google icon tag directly in the same tag as your text. For exemple:<p><img src="link/to/google/img">Google text<p>