CSS Centering isnt possible
My Problem is that I cant get the menu in my Footer centered (http://prntscr.com/te8bzk) when I’m in the portrait mode (I’m working with media queries). position: absolute; + right: 50%; isn’t working. But maybe I overlooked something because I’m still a beginner in HTML and CSS. Js fiddle link is https://jsfiddle.net/Cxtz11/mrz2L1dt/1/
.main-footer { border-color: white; border-radius: 0px; border-top-style: solid; border-width: thick; background; width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background-color: #333; opacity: inherit; } .footer-nav { list-style: none; position: absolute; top: 20px; right: 50%; } .footer-nav li { float: left; } .footer-nav li+li { margin-left: 10px; } .Copyright { display: flex; justify-content: center; align-items: flex-end; margin-top: 80px; color: #fff; } .Social { position: absolute; top: -20px; right: 50%; color: #fff; }<footer id="footer" class="main-footer clearfix"> <p class="Copyright clearfix"> S © 2020 </p> <h1 class="Social clearfix"> <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a> </h1> <ul class="footer-nav clearfix"> <li><a href="/Impressum/Impressum.html">Impressum</a></li> <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li> <li><a href="/AGB/AGB.html">AGB</a></li> </ul> </footer>(You may have to adjust the "display window" in JSfiddle to portrait because I’m working with media queries and there are two versions of my site.
Well, your styling convention is not so good here and I strongly suggest rewriting your styles entirely for sake of maintainable code. But regards to your current style there is a simple fix that should help to make your menu center as expected.
So you have to make your footer-nav class like this:
.footer-nav { padding: 0; list-style: none; position: absolute; top: 20px; right: 0; left: 0; display: flex; justify-content: center; } You can’t directly use display: flex; here alone because your ul element is extremely out of position, so you need to make sure to put your element inside your current box with right: 0 and left: 0 properties. Then you can use display: flex; and justify-content: center; as usual. Also due to the default ul element default padding for starting items, you need to set your padding to 0 as well.
Then your final code should be something like this:
.main-footer { border-color: white; border-radius: 0px; border-top-style: solid; border-width: thick; background; width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background-color: #333; opacity: inherit; } .footer-nav { padding: 0; list-style: none; position: absolute; top: 20px; right: 0; left: 0; display: flex; justify-content: center; } .footer-nav li { float: left; } .footer-nav li+li { margin-left: 10px; } .Copyright { display: flex; justify-content: center; align-items: flex-end; margin-top: 80px; color: #fff; } .Social { position: absolute; top: -20px; right: 50%; color: #fff; }<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" /> <footer id="footer" class="main-footer clearfix"> <p class="Copyright clearfix"> S © 2020 </p> <h1 class="Social clearfix"> <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a> </h1> <ul class="footer-nav clearfix"> <li><a href="/Impressum/Impressum.html">Impressum</a></li> <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li> <li><a href="/AGB/AGB.html">AGB</a></li> </ul> </footer>If in any case, you are looking for a slight refactor you can use the below version.
.main-footer { position: relative; border-color: white; border-radius: 0px; border-top-style: solid; border-width: thick; width: 100%; background-color: #333; display: flex; justify-content: center; align-items: center; flex-direction: column; } .Social { font-size: 2rem; } .Social .fab { color: #fff; } .footer-nav { padding: 0; list-style: none; display: flex; justify-content: center; } .footer-nav li+li { margin-left: 10px; } .Copyright { color: #fff; }<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" /> <footer id="footer" class="main-footer clearfix"> <div class="Social clearfix"> <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a> </div> <ul class="footer-nav"> <li><a href="/Impressum/Impressum.html">Impressum</a></li> <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li> <li><a href="/AGB/AGB.html">AGB</a></li> </ul> <p class="Copyright clearfix"> S © 2020 </p> </footer>
This is because right: 50% uses the right side of the image/footer nav to base the position (left: 50% uses the left edge of the element) – so the right side of your .Social and .footer-nav element is in the middle.
Without changing your code, you can add transform: translate(50%,0) to the .Social and .footer-nav elements. transform uses the width of the elements to determine where it moves from.
So, transform: translate(50%,0) is saying: move the element 50% to the left using the width of the element.
.main-footer { border-color: white; border-radius: 0px; border-top-style: solid; border-width: thick; background; width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background-color: #333; opacity: inherit; } .footer-nav { list-style: none; position: absolute; top: 20px; right: 50%; transform: translate(50%, 0); } .footer-nav li { float: left; } .footer-nav li+li { margin-left: 10px; } .Copyright { display: flex; justify-content: center; align-items: flex-end; margin-top: 80px; color: #fff; } .Social { position: absolute; top: -20px; right: 50%; color: #fff; transform: translate(50%, 0); }<footer id="footer" class="main-footer clearfix"> <p class="Copyright clearfix"> S © 2020 </p> <h1 class="Social clearfix"> <a href="https://instagram.com"> <i class="fab fa-instagram"></i> </a> </h1> <ul class="footer-nav clearfix"> <li><a href="/Impressum/Impressum.html">Impressum</a></li> <li><a href="/Datenschutz/Datenschutz.html">Datenschutz</a></li> <li><a href="/AGB/AGB.html">AGB</a></li> </ul> </footer>
