Kevin Powell - Community•2mo ago

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);
}

 .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;
    }
  }
}

.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

 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.

8 Replies

Chris Bolson•2mo ago

You haven't provided your HTML. You say that it is fine but, following your indications the items should be centered correctly which makes me think that you may have missed something or that there is something else going on. It would be easier if you could add your code to a Codepen or similar so that we could see what you are actually doing.

CodePen

Create a New Pen

...

Chris Bolson•2mo ago

Obviously I don't know the context but I would question why you need to wrap the ul inside a div 🤔 You seem to have multiple containers with flex when you may not actually need them.

ΚαλημεραςOP•2mo ago

Thanks for responding! https://codepen.io/nikas19/pen/gOVpogO here it is

nikas

CodePen

Untitled

...

ΚαλημεραςOP•2mo ago

And here it is how its displayed in browser via react app

Chris Bolson•2mo ago

OK, so from that we can see that in the Codepen it is centered correctly. That means that there must be something else in the actual app that is influencing the display, for example a bottom margin on ul elements. Have you looked at the inspector tool to see the styling on the UL element?

ΚαλημεραςOP•2mo ago

Yes! It had margin-bottom set to 3 rem for some reason So, why it had that set? I didn`t write anything, is it by default?

Chris Bolson•2mo ago

The inspector should give you some idea as to where that is defined. Something in the global CSS probably but without seeing the code base it is impossible to tell.

ΚαλημεραςOP•2mo ago

Its an expiremental project, the only css is here:

> *{
>   margin:0px;
>   padding :0px;
> }
> 
> .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);
> }
> .box1{
>   border:1px solid red;
>   flex:1;
>   padding-top: 2%;
>   
>   flex-grow:3;
>   background-image: url('./assets/LOGO.png');
>   background-size: contain;
>   background-repeat: no-repeat;
>   background-position: center; 
> }
> 
> 
> .box2{
>   width:100%;
>   border:1px solid green;
>   flex:2;
>   display:flex;
>   justify-content: flex-start;
>   align-items:flex-center;
> 
>   
>   ul{
>     width: 100%;
>     padding:0px;
>     border:1px solid red;
>     display: flex;
>     justify-content: space-between;
>     margin-bottom: 0px;
>     list-style: none;
>     a{
>       color:white;
>     }
>   }
>   
>   
>   
> }
> .box3{
>   border:1px solid blue;
>   flex:1;
>   display:flex;
>   justify-content: center;
>   align-items: flex-end;
>   width:100%;
> }
> .button{
> 
>   color:white;
>   border-radius:5px;
>   border: none;
>   outline: none;
>   width: 50%;
>   padding-top: 2.5%;
>   padding-bottom: 2.5%;
>   background-color: rgb(209, 60, 110);
>   text-align: center;
>   vertical-align: center;  
> }

> *{
>   margin:0px;
>   padding :0px;
> }
> 
> .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);
> }
> .box1{
>   border:1px solid red;
>   flex:1;
>   padding-top: 2%;
>   
>   flex-grow:3;
>   background-image: url('./assets/LOGO.png');
>   background-size: contain;
>   background-repeat: no-repeat;
>   background-position: center; 
> }
> 
> 
> .box2{
>   width:100%;
>   border:1px solid green;
>   flex:2;
>   display:flex;
>   justify-content: flex-start;
>   align-items:flex-center;
> 
>   
>   ul{
>     width: 100%;
>     padding:0px;
>     border:1px solid red;
>     display: flex;
>     justify-content: space-between;
>     margin-bottom: 0px;
>     list-style: none;
>     a{
>       color:white;
>     }
>   }
>   
>   
>   
> }
> .box3{
>   border:1px solid blue;
>   flex:1;
>   display:flex;
>   justify-content: center;
>   align-items: flex-end;
>   width:100%;
> }
> .button{
> 
>   color:white;
>   border-radius:5px;
>   border: none;
>   outline: none;
>   width: 50%;
>   padding-top: 2.5%;
>   padding-bottom: 2.5%;
>   background-color: rgb(209, 60, 110);
>   text-align: center;
>   vertical-align: center;  
> }

Gaming

Programming

Can`t center vertically a Flexbox item .