CODEWITHSUNDEEP
htmlcss
Parham
Parham

Reputation: 224

How do I align two <nav> elements?

Although .footer.links and .footer-links-names are centered, they're not perfectly aligned. I gave them both display:flex and justify-content:space-evenly; however they don't look aligned when I run it in the browser. I want the logo and link to be aligned perfectly. I hope that made sense.

.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:[email protected]" 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:[email protected]" target="_blank">[email protected]</a>
    <a href="#link" target="_blank">Linkdn.com/profile</a>
    <a href="#link" target="_blank">Github.com.com/profile</a>
  </nav>
</div>

Upvotes: 0

Views: 70

Answers (3)

ksav
ksav

Reputation: 20821

You could improve the structure of your HTML so that you're not duplicating your <a> tags, and just move the text inside each footer-link.

This would help with your alignment issue, de-deplicate your markup, and improve accessibility.

.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:[email protected]" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i><span class="footer-link_text">[email protected]</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>

Upvotes: 1

Sean H
Sean H

Reputation: 1

If the logos and links have different widths, they will not align perfectly with one another even when centered. To fix the problem, I would recommend creating three different divs that span the page (33% width for each of them), and stacking a logo and link in the center of each one.

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

Please forgive me if this code isn't perfect; I'm in a bit of a rush.

Upvotes: 0

Dhanuka Perera
Dhanuka Perera

Reputation: 1803

Give fixed width to the tag

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:[email protected]" 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:[email protected]" 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>

Upvotes: 0

Related Questions