html Bootstrap 5 中的图标未垂直居中对齐

Question

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

Answer 1

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>

Answer 2

Provide Css to the div..

display:flex;
align-items-center;
justify-content:flex-start;