圖標不在div內居中？對齊項目：中心問題？

Question

我有把我的簽名在一個網站的頁腳下面的代碼：https://codepen.io/BarrieO/pen/ayQxoZ

然而，在我的WordPress網站（http://bartoml215.215.axc.nl/）implemting代碼時，在申報單內的圖標不居中作爲Codepen。我認爲這與我的.icon-footer類的css屬性align-items: center有關，但不確定嗎？

要說清楚的是：我想在圓角正方形中間完美地對齊圖標，而不是在網站上的底部 - 中部。我想要得到與Codpen相同的結果。

我的圖標怎麼沒有在.icon-footers div中被分配？

Answer 1

這是一個修復程序。我在你的網站上測試過它。 如果你這樣做，我真的更喜歡。但如果你不希望這樣......下面去.. 注意，這個工作必須更換下面的「底欄」的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> 

ok了第二個解決方案： 只是改變這個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文件中

取下 .icon-footer​​

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