0

I'm not sure why is this happening. When I remove:

.nav-username {
    display: flex;
    align-items: center;
}

the elements align horizontally, however, the image and text stop being aligned vertically because I've removed the display: flex and align-items: center.

$('.dropdown').on('click', function() {
  $('.navigation-ul li:not(:first-child)').toggleClass('active');
});
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  color: white;
}

a {
  color: #f1f1f1;
}

html {
  font-size: 16px;
}

body {
  background-color: #fafafa;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  width: 100%;
}

.navigation {
  background-color: #171717;
}

.navigation-ul {
  display: flex;
  align-items: center;
}

.navigation-ul>li:not(.dropdown) {
  padding: 10px 15px 10px 15px;
  font-weight: 500;
  text-align: center;
  font-size: 1em;
  color: white;
  background-color: #151719;
  list-style-type: none;
}

.navigation-ul li:nth-last-child(2) {
  margin-left: auto;
}

.nav-username {
  display: flex;
  align-items: center;
}

.profile-picture {
  display: inline-block;
  border-radius: 50px;
  height: 30px;
  width: 30px;
  margin-right: 10px;
}

@media all and (min-width: 0px) and (max-width: 1200px) {
  .navigation-ul {
    flex-wrap: wrap;
  }
  .navigation-ul>li {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 1200px) {
  .navigation-ul li:first-child {
    display: block;
  }
  .navigation-ul li {
    display: none;
  }
  .navigation-ul li.active {
    display: block;
  }
  .navigation-ul .dropdown {
    display: block;
    cursor: pointer;
  }
  .home-container {
    columns: 2;
  }
  .dropdown {
    padding: 7px 0 7px 0;
    text-align: center;
  }
  .specific-image-flexbox {
    flex-direction: column;
  }
}

@media screen and (max-width: 600px) {
  .home-container {
    columns: 1;
  }
  .category-container-element {
    width: 100%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="navigation-ul">
      <li class='dropdown'>Dropdown</li>
      <li><a href="">Images</a></li>
      <li><a href="">Categories</a></li>
      <li><a href="">Upload</a></li>
      <li>
        <a class='nav-username' href=''>
          <img class='profile-picture' src=''> Username
        </a>
      </li>
      <li><a href="">Logout</a></li>
    </ul>
  </div>
</nav>
Kenny Horna
  • 13,485
  • 4
  • 44
  • 71
Onyx
  • 5,186
  • 8
  • 39
  • 86

3 Answers3

1

I think there is an issue with putting a display type flex onto an anchor tag. I've placed the flex class onto the list item and it appears to work fine:

$('.dropdown').on('click', function() {
  $('.navigation-ul li:not(:first-child)').toggleClass('active');
});
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  color: white;
}

a {
  color: #f1f1f1;
}

html {
  font-size: 16px;
}

body {
  background-color: #fafafa;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  width: 100%;
}

.navigation {
  background-color: #171717;
}

.navigation-ul {
  display: flex;
  align-items: center;
}

.navigation-ul>li:not(.dropdown) {
  padding: 10px 15px 10px 15px;
  font-weight: 500;
  text-align: center;
  font-size: 1em;
  color: white;
  background-color: #151719;
  list-style-type: none;
}

.navigation-ul li:nth-last-child(2) {
  margin-left: auto;
}

.nav-username {
  display: flex;
  align-items: center;
}

.profile-picture {
  display: inline-block;
  border-radius: 50px;
  height: 30px;
  width: 30px;
  margin-right: 10px;
  vertical-align: middle;
}

@media all and (min-width: 0px) and (max-width: 1200px) {
  .navigation-ul {
    flex-wrap: wrap;
  }
  .navigation-ul>li {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 1200px) {
  .navigation-ul li:first-child {
    display: block;
  }
  .navigation-ul li {
    display: none;
  }
  .navigation-ul li.active {
    display: block;
  }
  .navigation-ul .dropdown {
    display: block;
    cursor: pointer;
  }
  .home-container {
    columns: 2;
  }
  .dropdown {
    padding: 7px 0 7px 0;
    text-align: center;
  }
  .specific-image-flexbox {
    flex-direction: column;
  }
}

@media screen and (max-width: 600px) {
  .home-container {
    columns: 1;
  }
  .category-container-element {
    width: 100%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="navigation-ul">
      <li class='dropdown'>Dropdown</li>
      <li><a href="">Images</a></li>
      <li><a href="">Categories</a></li>
      <li><a href="">Upload</a></li>
      <li class='nav-username'>
        <a href=''><img class='profile-picture' src=''> Username</a>
      </li>
      <li><a href="">Logout</a></li>
    </ul>
  </div>
</nav>
MichaelvE
  • 2,558
  • 2
  • 9
  • 18
  • The problem is that now the username is not vertically aligned with the image. I've used flexbox on the anchor to fix that problem. – Onyx Oct 30 '18 at 02:35
  • You can add the style vertical-align: middle; to your profile-picture class on the img tag. I've updated the snippet with this and it seems to have solved it. – MichaelvE Oct 30 '18 at 06:21
1

You need to add property justify-content:center; as well. So it will be centered align vertically and horizontally.

So, you need to update

.nav-username {
    display: flex;
    align-items: center;
}

to

.nav-username {
    display: flex;
    align-items: center;
    justify-content: center;
}
Ahmed Hassan
  • 259
  • 3
  • 15
  • Interestingly enough, this is the the solution that fixed my problem. – Onyx Oct 30 '18 at 02:41
  • This might be the solution that fixes your overall problem, but it's not a solution to the problem you described in the question, which was about vertical centering with and without flexbox. – Michael Benjamin Oct 30 '18 at 03:15
1

Your CSS code:

.nav-username {
    display: flex;
    align-items: center;
}

... is being applied to an anchor element:

<a class='nav-username' href=''>
    <img class='profile-picture' src=''>
    Username
</a>

Let's start with what happens when flex is removed.

  • An anchor element is, by default, an inline-level element. This means that it takes up only the space of its content. With inline-level elements, the width property and the height property, do not apply.

  • Then consider that the vertical-align property applies to inline-level elements (and table-cell elements). Its default value is baseline, which means that inline-level elements start out with baseline alignment.

  • So, without flex layout, an anchor element falls back to block layout, and the above settings are in place. To vertically center the text in this case, try vertical-align: middle.

    /* .nav-username {
      display: flex;
      align-items: center;
   } */

.nav-username > * {
    vertical-align: middle;
}

jsFiddle demo

When flex is active, here's how it plays out:

  • A flex container converts its child elements into flex items, which are block-level elements, by definition. This conversion ignores the element type. So elements that are inline-level or block-level in block layout, are block-level in flex layout.

  • This means that the vertical-align property is ignored by flex items and, together with the explanation above, explains why the vertical centering is working when flex is in place, but not when flex is removed.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701