CSS 无法居中

Question

我的问题是我无法让页脚中的菜单居中（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>

（您可能需要将 JSfiddle 中的“显示 window”调整为纵向，因为我正在处理媒体查询并且我的网站有两个版本。

Answer 1

嗯，你的样式约定在这里不太好，我强烈建议为了代码的可维护性而完全重写你的样式。但是关于您当前的样式，有一个简单的修复方法应该有助于使您的菜单居中如预期。

所以你必须让你的 footer-nav class 像这样：

.footer-nav {
  padding: 0;
  list-style: none;
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
}

你不能直接在这里单独使用 display: flex; 因为你的 ul 元素非常错位，所以你需要确保将你的元素放在你当前的盒子里 right: 0 和 left: 0 属性。然后你就可以像往常一样使用 display: flex; 和 justify-content: center; 了。此外，由于默认 ul 元素默认填充的起始项，您也需要将填充设置为 0。

那么你的最终代码应该是这样的：

.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>

如果在任何情况下，您正在寻找一个轻微的重构，您可以使用以下版本。

.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>

Answer 2

这是因为 right: 50% 使用 image/footer 导航的右侧作为基础位置（left: 50% 使用元素的左边缘） - 所以你的右侧.Social 和 .footer-nav 元素在中间。

无需更改代码，您可以将 transform: translate(50%,0) 添加到 .Social 和 .footer-nav 元素。 transform 使用元素的 width 来确定它从哪里移动。

因此，transform: translate(50%,0) 表示：使用元素的宽度将元素向左移动 50%。

.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 无法居中

CSS Centering isnt possible

html

css

centering