Skip to content

Items flex item is left-aligned and right-aligned, how to center it when the browser window is resized down?

I have a navbar with 3 flex items as shown below, and I can’t seem to figure out how to center the containers when vertically collapsed.

enter image description here

When I shrink the browser this is the result –

enter image description here

How do I center the B logo as well as the icons container at the bottom to be vertically centered to the middle when the browser collapses?

The code is below:

    <nav class = "navlinks">
    <img src="/bootstrap-clone/Images/" alt="bootstraplogo" id="bootstraplogo">
    <ul class="leftbar">
        <li><a href="#"> Home</a></li>
        <li><a href="#"> Documentation</a></li>
        <li><a href="#"> Examples</a></li>
        <li><a href="#"> Icons</a></li>
        <li><a href="#"> Themes</a></li>
        <li><a href="#"> Expo</a></li>
        <li><a href="#"> Blog</a></li>
    <ul class="rightbar">
      <li><a href="#"><img src="/bootstrap-clone/Images/github.svg" alt="github"></a></li>
      <li><a href="#"><img src="/bootstrap-clone/Images/twitter.svg" alt="twitter"></a></li>
      <li><a href="#"><img src="/bootstrap-clone/Images/slack.svg" alt="slack"></a></li>
      <li><a href="#"><img src="/bootstrap-clone/Images/google.svg" alt="google"></a></li>
      <li><a href="#"><button class="btn download">Download</button></a></li>
    background-color: white;
    font-family:Arial, Helvetica, sans-serif
.navlinks {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px;
    background-color: rgb(121,82,179);
    height: auto;
    flex-wrap: wrap;
      padding: 10px;
      flex-shrink: 0;
  .leftbar li {
    display: inline-block;
    padding: 5px;
  .leftbar li a {
    text-decoration: none;
    color: rgb(236,231,244);
    font-family: Helvetica, sans-serif;
  .rightbar li {
      padding: 8px;
      padding-bottom: 0px;
    margin-left: auto;
    padding: 5px;


simply using pure CSS ‘s media queries:

@media only screen and (max-width: 992px) {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        margin: auto;

see an example