Элемент гибкости Items выравнивается по левому и правому краям, как центрировать его, когда размер окна браузера уменьшается? - PullRequest
Новая
       45

Элемент гибкости Items выравнивается по левому и правому краям, как центрировать его, когда размер окна браузера уменьшается?

0 голосов
/ 01 августа 2020

У меня есть панель навигации с 3 гибкими элементами, как показано ниже, и я не могу понять, как центрировать контейнеры при вертикальном свертывании.

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:

    
    background-color: white;
    margin:0; 
    padding:0;
    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;
  }

  .leftbar{
      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;
    font-weight:400;
  }

  .rightbar li {
      display:inline-block;
      padding: 8px;
      padding-bottom: 0px; 
  }

  .rightbar{
    margin-left: auto;
    padding: 5px; 
  }

1 Ответ

3 голосов
/ 01 августа 2020

просто используя чистые медиа-запросы CSS: 

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

см. Пример

...