图标未在 html Bootstrap 5 中垂直居中对齐答案

【问题标题】：Icon not aligning vertically center in html Bootstrap 5图标未在 html Bootstrap 5 中垂直居中对齐
【发布时间】：2022-01-04 09:50:25
【问题描述】：

我目前是 Css 新手谷歌图标没有垂直对齐中心，从底部提供一些填充，您可以在附件中看到...文本居中对齐

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

对于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>

这是我的屏幕截图 Output for css code

【问题讨论】：

在代码 sn-p 中需要它

标签： javascript html css bootstrap-4 figma

【解决方案1】：

我给你两种可能性：

在 css 中，您可以使用属性“float”来粘贴您的文本和您的 google 图标。见：https://developer.mozilla.org/fr/docs/Web/CSS/float
您可以将您的 google 图标标签直接放在与您的文本相同的标签中。例如：<p><img src="link/to/google/img">Google text<p>

【讨论】：

【解决方案2】：

为 div 提供 Css..

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

【讨论】：