divの中にアイコンが配置されていませんか？整列項目：センターの問題？

Question

私は、ウェブサイトのフッターに私の署名を置くために、次のコードを持っている：https://codepen.io/BarrieO/pen/ayQxoZ

私のWordpressのウェブサイト（http://bartoml215.215.axc.nl/）上でコードをimplemtingしかし、divタグ内のアイコンが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第二の溶液：

#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つの変更を行う必要があります：

を はちょうど私が以下に提供しているものに、このCSSセレクタを変更

の1-変更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〜メインwingedHelmet要素クラスは、あなたのCSSファイル

をして .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-クラスmain-icon-footerを追加します。

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