图标不在div中心？对齐项目：中心问题？

Question

我有以下代码将我的签名放在网站的页脚中：https://codepen.io/BarrieO/pen/ayQxoZ

但是，在我的Wordpress网站（http://bartoml215.215.axc.nl/）上实现代码时，div中的图标不会像Codepen中那样居中。我认为这与我的align-items: center课程的css属性.icon-footer有关，但不确定？

要明确：我想在圆角正方形的中间完美地对齐图标，而不是在网站上当前的底部中间。我想要和Codpen一样的结果。

为什么我的图标没有在.icon-footers div中分配？

Answer 1

这是一个修复。我在你的网站上测试过它。 我真的更喜欢你这样做。但如果你不想要这个......请到下面.. 请注意，要使其工作，您必须使用＆＃34; bottom-bar＆＃34;替换下面的代码。你已经拥有的那个......

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

确定第二个解决方案： 只需将此css选择器更改为我在下面提供的内容：

#starter {
    cursor: pointer;
    width: 70px;
    height: 50px;
    z-index: 5;
    /* left: 215px; */
    /* transform: translate(-100%, -100%); */
    transition: all 0.6s linear;
    filter: invert(100%);
}
.iconHolder {
    position: absolute;
    /* top: 57px; */
    width: 215px;
    /* right: 20px; */
}

Answer 2

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

1-将主wingedHelmet元素类更改为main-icon-footer

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

2-将班级main-icon-footer添加到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;
}

3-从CSS文件中的align-items: center;删除.icon-footer

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