I am aiming to have my mail icon centered at the bottom of my page. I initially used <div class=section4> with a position: relative and applied position:absolute to my #mailicon. This successfully placed the icon at the bottom of my div, but it now consistently shifts to the right without being centered.
How can I reposition it back to the center while still keeping it at the bottom of my div? Additionally, as I am developing a responsive website with a mobile-first approach, the most responsive solution is preferred! Thank you!
Below is my HTML:
<div class="section section4">
<img src="icons/ML-network.gif" alt="icon3">
<h1>...</h1>
<p class="ultralight">...</p>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05666a6b71646671456864626c666c6601636826676e67616c7d36">[email protected]</a>"><img id="mailicon" src="icons/email-icon%20color.png" alt="mail icon"></a>
</div>
and the corresponding CSS:
.section {
height: 100vh;
width: 100%;
text-align: center;
}
.section4 {
position: relative;
}
#mailicon {
width: 15%;
position: absolute;
bottom: 0;
}