Icons not centered within div? Align-item: center issue? - html

Question

I have the following code for putting my signature in the footer of a website: https://codepen.io/BarrieO/pen/ayQxoZ
However, when implemting the code on my Wordpress website (http://bartoml215.215.axc.nl/), the icons within the divs are not centered as in the Codepen. I think this has to do with the css property align-items: center for my .icon-footer class, but not sure?
To be clear: I want to allign the icons perfectly in the middle of the rounded squares, not in the bottom-middle as currenctly on the website. I want the same result as in the Codpen.
How come my icons are not alligned in the .icon-footers divs?

Answer 1

You need to do 3 modifications for it to work for your website:
1- Change the main wingedHelmet element class to 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- Add the class main-icon-footer to your CSS file
.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- Remove align-items: center; from .icon-footer in your CSS file
.icon-footer {
position: absolute;
display: flex;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 25%;
background: white;
border: 1px #818181 solid;
}

Answer 2

This is a fix. I tested it on your site.
I really prefer if you do this. but if you don't want this... go below..
note that for this to work you have to replace this code below with the "bottom-bar" div that you already have...
<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 the second solution:
just change this css selectors to what i have provided below:
#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; */
}