Icon not aligning vertically center in html Bootstrap 5

user_17804212 0
Viewed 90

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

figma bootstrap-4 css html javascript
2 Answers

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>

user_162263930

Provide Css to the div..

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