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 >
   <i ></i>
     <div >
      <label > Register with Google</label>
     </div>
  </div>

Here is my screen short Output for css code

CodePudding user response：

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>

CodePudding user response：

Provide Css to the div..

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