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

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 的结构，这样您就不会复制<a>标签，只需将文本移动到每个footer-link内。

这将有助于解决您的 alignment 问题、去除标记的重复性并提高可访问性。

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

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

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（每个 33% 的宽度），并在每个的中心堆叠一个徽标和链接。

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

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