Html 图标未在div中居中？对齐项目：中心问题？

我有以下代码将我的签名放在网站的页脚：

但是，在我的Wordpress网站（）上执行代码时，div中的图标并不像Codepen中那样居中。我认为这与我的

图标页脚类的css属性
align items:center
有关，但不确定

要清楚：我想把图标完美地排列在圆角正方形的中间，而不是在底部的中间，就像在网站上一样。我想要和密码笔一样的结果
为什么我的图标没有在.icon footers div中对齐？
这是一个修复方法。我在你的网站上测试过。
我真的更喜欢你这样做。但是如果你不想要这个。。。到下面去。。
请注意，要使其正常工作，您必须将下面的代码替换为您已有的“底部条形图”div

<div id="bottom-bar" class="solid-bg" role="contentinfo">
    <div class="wf-wrap">
        <div class="wf-container-bottom">
            <div class="wf-table wf-mobile-collapsed" style="
    text-align: center;
    padding-top: 15px;
">

<div id="starter" class="icon-footer" style="
    transform: none;
    position: static;
    margin: auto;
">
      <img src="https://www.petasos.be/wp-content/uploads/2017/05/wingedHelmetSmall.png" class="petasos">
    </div>

</div>
        </div><!-- .wf-container-bottom -->
    </div><!-- .wf-wrap -->
</div>

这是一个修复程序。我在你的网站上测试过。
我真的更喜欢你这样做。但是如果你不想要这个。。。到下面去。。
请注意，要使其正常工作，您必须将下面的代码替换为您已有的“底部条形图”div

<div id="bottom-bar" class="solid-bg" role="contentinfo">
    <div class="wf-wrap">
        <div class="wf-container-bottom">
            <div class="wf-table wf-mobile-collapsed" style="
    text-align: center;
    padding-top: 15px;
">

<div id="starter" class="icon-footer" style="
    transform: none;
    position: static;
    margin: auto;
">
      <img src="https://www.petasos.be/wp-content/uploads/2017/05/wingedHelmetSmall.png" class="petasos">
    </div>

</div>
        </div><!-- .wf-container-bottom -->
    </div><!-- .wf-wrap -->
</div>

您需要进行3次修改，才能使其适用于您的网站：

1-将主
wingedHelmet
元素类更改为
主图标页脚

<div id="starter" class="main-icon-footer ">
  <img src="https://www.petasos.be/wp-content/uploads/2017/05/wingedHelmetSmall.png" class="petasos">
</div>

3-移除
对齐项目：居中来自CSS文件中的
。图标页脚

.main-icon-footer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 25%;
  background: white;
  border: 1px #818181 solid;
}

.icon-footer {
      position: absolute;
      display: flex;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 25%;
      background: white;
      border: 1px #818181 solid;
}

您需要进行3次修改才能使其适用于您的网站：

1-将主
wingedHelmet
元素类更改为
主图标页脚

<div id="starter" class="main-icon-footer ">
  <img src="https://www.petasos.be/wp-content/uploads/2017/05/wingedHelmetSmall.png" class="petasos">
</div>

3-移除
对齐项目：居中来自CSS文件中的
。图标页脚

.main-icon-footer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 25%;
  background: white;
  border: 1px #818181 solid;
}

.icon-footer {
      position: absolute;
      display: flex;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 25%;
      background: white;
      border: 1px #818181 solid;
}

您希望它与何处对齐？它目前位于网站页脚的右侧@NalnMurali抱歉不清楚，我希望图标被完美地排列在圆形的正方形中间。页脚/网站中的位置很好。@BarrieO你不投票吗\您希望它与何处对齐？它目前位于网站页脚的右侧@NalnMurali抱歉不清楚，我希望图标被完美地排列在圆形的正方形中间。页脚/网站中的位置很好。@BarrieO你不投票吗\我看不出这是如何解决问题的！我在chrome浏览器中尝试了这个。但它弄乱了图标。翅膀飞出边界！！是的，它修复了图标，弄乱了翅膀。这就是为什么第一步是更改wings图标组件的类。然后更改图标页脚类属性。真正的问题是他正在做的那些定位。他们不是真的需要。我不知道这是如何解决问题的！我在chrome浏览器中尝试了这个。但它弄乱了图标。翅膀飞出边界！！是的，它修复了图标，弄乱了翅膀。这就是为什么第一步是更改wings图标组件的类。然后更改图标页脚类属性。真正的问题是他正在做的那些定位。它们不是真正需要的。