Question

尽管.footer.links和.footer-links-names居中，但它们并不是完全对齐。我给了他们display：flex和justify-content：space-evenly;但是当我在浏览器中运行它们时，它们看起来并没有对齐。我希望徽标和链接完美对齐。我希望这是有道理的。

.footer {
  margin-top: 0.5rem;
  background-color: #696969;
}

.footer-links {
  justify-content: space-evenly;
  display: flex;
  font-size: 3rem;
  margin-top: 0.5rem;
}

.footer-links-names {
  justify-content: space-evenly;
  display: flex;
}

<link rel="stylesheet" type="text/css" href="psi.css" media="all">
<script src="https://use.fontawesome.com/82c7176f2a.js"></script>

<div class="footer">
  <nav class="footer-links">
    <a href="mailto:someone@yoursite.com" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
    <a href="#link" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
    <a href="#link" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
  </nav>
  <nav class="footer-links-names">
    <a href="mailto:someone@yoursite.com" target="_blank">email@yahoo.com</a>
    <a href="#link" target="_blank">Linkdn.com/profile</a>
    <a href="#link" target="_blank">Github.com.com/profile</a>
  </nav>
</div>

Answer 1

您可以改善HTML的结构，以免重复使用PublishedPipelines标签，而只需在每个<a>中移动文本即可。

这将帮助您解决对齐问题，删除标记并提高可访问性。

footer-link

.footer {
  margin-top: 0.5rem;
  background-color: #696969;
}

.footer-links {
  display: flex;
  font-size: 3rem;
  margin-top: 0.5rem;
}

.footer-link {
  display: flex;
  flex: 1 1 33.3%;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.footer-link_text {
  font-size: 1rem;
  text-decoration: underline;
}

Answer 2

为标签提供固定宽度

a{
   width:100px;
   display:flex;
   justify-content:center;
}

.footer {
  margin-top: 0.5rem;
  background-color: #696969;
}

.footer-links {
  justify-content: space-evenly;
  display: flex;
  font-size: 3rem;
  margin-top: 0.5rem;
}

.footer-links-names {
  justify-content: space-evenly;
  display: flex;
}

a{
  width:100px;
  display:flex;
 justify-content:center;
}

<link rel="stylesheet" type="text/css" href="psi.css" media="all">
<script src="https://use.fontawesome.com/82c7176f2a.js"></script>

<div class="footer">

  <nav class="footer-links">
    <a href="mailto:someone@yoursite.com" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
    <a href="#link" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
    <a href="#link" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
  </nav>
  
  <nav class="footer-links-names">
    <a href="mailto:someone@yoursite.com" target="_blank">Email</a>
    <a href="https://www.linkedin.com/" target="_blank">Linkdn</a>
    <a href="https://github.com/" target="_blank">Github</a>
  </nav>
</div>

Answer 3

如果徽标和链接的宽度不同，则即使居中也无法将它们完美对齐。为了解决该问题，我建议创建三个跨越整个页面的div（每个div的宽度为33％），并将徽标和链接堆叠在每个div的中心。

.large-flex-container {
  display: flex,
  width: 100%
}

/* add CSS that centers the images and links within their respective divs */

<div class="large-flex-container">
  <div>
    <!-- insert first logo and link here -->
  </div>
  <div>
    <!-- insert second logo and link here -->
  </div>
  <div>
    <!-- insert third logo and link here -->
  </div>
</div>

如果此代码不完美，请原谅；我有点着急。

如何对齐两个<nav>元素？

3 个答案: