Kevin Powell - CommunityKP-C
Kevin Powell - Community•16mo ago•
9 replies
Καλημερας

Can`t center vertically a Flexbox item .

So i am trying to make a header in react, (but focus on HTML and CSS in this point).

i have a DIV container in which all the header elements are placed:

 .container{
  min-width: 100vw;
  min-height: 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  gap: 200px;
  background-color: rgb(18, 11, 26);
}

And inside this Div i have an other DIV with the UL element for the menu. The HTML code is fine, i ll give you the CSS and describe the issue:

.box2{
  width:100%;
  border:1px solid green;
  flex:2;
  display:flex;
  justify-content: flex-start;
  align-items:center;

  
  ul{
    width: 100%;
    padding:0px;
    border:1px solid red;
    display: flex;
    justify-content: space-between;

    list-style: none;
    a{
      color:white;
    }
  }
}


So i want inside the box2 to display a UL as a row in the center of the box2 element. The issue is that using 
 align-items
property doesnt work to center vertically the UL element. It stays on top. I know its a noob question but i tried everything and i cant figure it out.
image.png
Was this page helpful?