CSS Centering isnt possible

Question

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 &copy; 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.

I would consider playing with the display flex properties for all positioning. This will end up getting you closer to what you want on all displays. — FujiRoyale, Jul 08 '20 at 17:38
Also your JS-fiddle link does not include the image you want centered. I'm getting only a broken image link. — FujiRoyale, Jul 08 '20 at 17:39
I dont want the Image centered but the Menu in the footer. The Image is working just fine. — SensorMark, Jul 08 '20 at 17:41

SMAKSS · Accepted Answer · 2020-07-08T18:07:17.087

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 &copy; 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 &copy; 2020
  </p>
</footer>

score 0 · Answer 2 · answered Jul 08 '20 at 17:58

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 &copy; 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>

CSS Centering isnt possible

2 Answers2