center navbar with an image next to the link?

user_13992194 0
Viewed 50

I'm working a project for the oden project that has us recreating a form from Intuit Accounts, and I'm having a hard time trying to get that navbar with the links to those other company with the corresponding logo on the same line as the link. I've tried inspect element and copied the CSS for the website, but that doesn't work for me for some reason, so after that I've tried to recreating it with my own CSS, and I got the entire nav bar to line up. With each list element to line up, and each logo to line up with the corresponding link, but I can't get the navbar to center. How would I do that?

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

body {
  background: #D3D3D3;
  font-family: Arial, sans-serif;
}


/* header name */

.main-company-name {
  font-size: 1.4rem;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0;
}


/* navbar list of companies */

.list-of-other-companies-header {
  padding-bottom: 0.25rem;
  padding-top: 0;
  border-bottom-style: solid;
  border-bottom-width: 0;
  border-bottom-color: transparent;
}

.companies-list ul {
  height: 23px;
  width: 100%;
  margin: auto 0;
}

nav .companies-list,
ul,
li {
  display: inline;
  cursor: pointer;
  margin-right: 0.375rem;
}

nav .companies-list,
ul,
li,
h2 {
  display: inline;
  position: relative;
}

.company img {
  width: 18px;
}

.company a {
  text-decoration: none;
  color: gray;
  font-size: .8rem;
}
<!-- company name/logo header -->
<header>
  <div class="main-company-name">
    <h1>Intuit</h1>
  </div>
</header>
<!-- navbar list of other compaines -->
<section>
  <div class="list-of-other-companies-header">
    <nav class="companies-list">
      <ul>
        <li class="company">
          <a href="https://mint.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the mint company logo">
          </a>
          <a href="https://mint.intuit.com/" target="_blank">
            <h2>
              mint
            </h2>
          </a>
        </li>
        <li class="company">
          <a href="https://quickbooks.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the quickbooks company logo">
          </a>
          <a href="https://quickbooks.intuit.com/" target="_blank">
            <h2>
              quickbooks
            </h2>
          </a>
        </li>
        <li class="company">
          <a href="https://turbotax.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the turbotax company logo">
          </a>
          <a href="https://turbotax.intuit.com/" target="_blank">
            <h2>
              turbotax
            </h2>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

css html
2 Answers

Center text alignment on the list's parent element and remove the default padding on the list.

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

body {
  background: #D3D3D3;
  font-family: Arial, sans-serif;
}


/* header name */

.main-company-name {
  font-size: 1.4rem;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0;
}


/* navbar list of companies */

.list-of-other-companies-header {
  padding-bottom: 0.25rem;
  padding-top: 0;
  border-bottom-style: solid;
  border-bottom-width: 0;
  border-bottom-color: transparent;
}

.companies-list {
  text-align: center;
}

.companies-list ul {
  height: 23px;
  width: 100%;
  margin: auto 0;
  padding-left: 0;  /* <-- HERE */
}

nav .companies-list,
ul,
li {
  display: inline;
  cursor: pointer;
  margin-right: 0.375rem;
}

nav .companies-list,
ul,
li,
h2 {
  display: inline;
  position: relative;
}

.company img {
  width: 18px;
}

.company a {
  text-decoration: none;
  color: gray;
  font-size: .8rem;
}
<!-- company name/logo header -->
<header>
  <div class="main-company-name">
    <h1>Intuit</h1>
  </div>
</header>
<!-- navbar list of other compaines -->
<section>
  <div class="list-of-other-companies-header">
    <nav class="companies-list">
      <ul>
        <li class="company">
          <a href="https://mint.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the mint company logo">
          </a>
          <a href="https://mint.intuit.com/" target="_blank">
            <h2>
              mint
            </h2>
          </a>
        </li>
        <li class="company">
          <a href="https://quickbooks.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the quickbooks company logo">
          </a>
          <a href="https://quickbooks.intuit.com/" target="_blank">
            <h2>
              quickbooks
            </h2>
          </a>
        </li>
        <li class="company">
          <a href="https://turbotax.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the turbotax company logo">
          </a>
          <a href="https://turbotax.intuit.com/" target="_blank">
            <h2>
              turbotax
            </h2>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

user_12648040

use flexbox and get rid of the old-school navbar (ul one).

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  background: #D3D3D3;
  font-family: Arial, sans-serif;
}


/* header name */

.main-company-name {
  font-size: 1.4rem;
  color: gray;
  text-align:center;
  padding: 1.25rem 0;
}

.navigation{
  display: flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
}

.comp{
  display: flex;
  flex-direction:row;
  align-items:center;
  margin-right: auto;
  margin-left: auto;
}
.comp a{
  margin-right: 6px;
}
<!-- company name/logo header -->
<h1 class="main-company-name">Intuit</h1>
<!-- navbar list of other compaines -->
<nav class="navigation">
  <div class="comp">
    <a href="https://mint.intuit.com/" target="_blank">
      <img src="images/mint.svg" alt="">
    </a> mint
  </div>
  <div class="comp">
    <a href="https://quickbooks.intuit.com/" target="_blank">
      <img src="images/quickbooks.svg" alt="">
    </a> quickbooks
  </div>
  <div class="comp">
    <a href="https://turbotax.intuit.com/" target="_blank">
      <img src="images/turbotax.svg" alt="">
    </a> turbotax
  </div>
</nav>

Admin1
Related