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) {
}

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

您的图片清楚地表明，无论徽标如何，您都希望将列放置在页脚的中心。

这就是为什么我通过将徽标设为绝对元素而从流程中删除徽标的原因。这样，可以在不干扰居中列位置的情况下定位元素。

您也不能混合使用flex和float：

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

弹性容器为其建立新的弹性格式上下文   内容。这与建立块格式化上下文相同，   除了使用flex布局而不是块布局。

例如，浮点数不会侵入flex容器，并且   flex容器的边距不会随着其容器的边距而崩溃   内容。

浮动和清除不会产生弹性项目的浮动或清除，并且   不要让它流出。

您可以在此处找到代码的有效示例：

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

Answer 2

这是您要寻找的吗？

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;
  display: flex;
  justify-content: center;
}


/* ================================= 
  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>

我的页脚未对齐，需要固定，使其位于中心

2 个答案: