html - 我的页脚未对齐，需要修复才能位于中心

Question

如屏幕截图所示:https://i.imgur.com/7fh65T6.png

我的页脚没有与中心对齐，这让我很烦恼。

我会发送一个屏幕显示我希望它的外观。截图-> https://i.imgur.com/5tf1SYN.png

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2,
h3,
a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,
.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.footer {
  position: -1%;
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}


/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
  .footer,
  .main-nav {
    display: flex;
  }
  .footer {
    flex-direction: column;
    align-items: center;
    .footer {
      width: 80%;
      margin: 0 auto;
      max-width: 1150px;
    }
  }
}

@media (min-width: 1025px) {
  .footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

<footer class="footer">

  <ul style="font-size: 10px; text-align: center; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px;">
    <li><a href="">Cadet Resources</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>
  <ul style="font-size: 10px; text-align: center;  padding-left: 10px; padding-right: 10px;">
    <li><a href="">Contact Us</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>

  <h1 class="logo" style="float: right;"><a style="font-size: 10px; float: right; margin-right: 25px;"> Air Cadets 2019</a></h1>
</footer>

Answer 1

我已经稍微清理了你的代码，使布局清晰。

<footer class="footer">

  <ul class="column-one">
    <li><a href="">Cadet Resources</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>
  <ul class="column-two">
    <li><a href="">Contact Us</a></li>
    <li><a href="">Apply</a></li>
    <li><a href="">Cadet Login</a></li>
  </ul>

  <h1 class="logo"> Air Cadets 2019</h1>
</footer>

请注意，我已经删除了内联所有内联样式，因为这被认为是一种不好的做法，主要是为了维护。您可以在此处阅读更多相关信息:What's so bad about in-line CSS?

footer > ul.column-one {
  margin-right: 10px;
}

footer > ul.column-two {
  margin-left: 10px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer {
  position: -1%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
  footer {
    display: flex;
    position: relative;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    max-width: 1150px;
  }

  footer > h1 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 1.45em;
  }
}

@media (min-width: 1025px) {
}

如您所见，您可以通过分别为每个元素应用左右边距来设置内部列之间的边距。

您的图片清楚地表明您希望将列放置在页脚的中央，而不管 Logo 如何。

这就是为什么我通过将其作为绝对元素从流程中删除 Logo 。这样就可以在不影响居中列位置的情况下定位元素。

你也不能混合使用 flex 和 floats:

3. Flex Containers: the flex and inline-flex display values

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.

For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

您可以在此处找到代码的工作示例:

https://codepen.io/anon/pen/dLJqey