Centering <li> centent using flexbox

Hello sitepoint community,
this is my first post in this forum and just started to learn css.
I stuck when i am trying to find out how to center

  • content in the very middle.

    <ul class="container">
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <li class="item3">item3</li>
        <li class="item4">item4</li>    

    CSS code

    ul {
        border: 2px solid red;
        height: 4em;
        padding: 0;    
    .container {
        display: flex;
        flex-flow: row;
    .container li {
        list-style-type: none;
        width: 15em;
        border: 5px solid green;

    I apllied a border to the li element and to the container.
    With align-text property the content is just centered horizontally
    How do i do to have the content centered in the very middle ?
    Thxs in advance

  • Not sure why your making an UL flex. But try…

    .container li{
    justify-content: center

    Attached is a pdf that will help with flexflexboxsheet.pdf (955.8 KB)

    for purpose of learning how flexbox works.
    The best that i got is this using align-items = center property

    I tried to center using margin and padding in multiple ways but nothing, they just affect the borders not the content itself

    What is the end result you want?

    This is a good reference I use for flex:-

    I also notice you are using fixed widths and heights in your css, that’s not a very flexible way to set things up.

    Why not? There are many uses for that, such as menus or “card” style layouts.

    Guessing at that…
    Is it just a case of ditching the fixed height for vertical padding?
    I also dropped the fixed width for flex-basis.

    This could be done with display: table and have better legacy browser support, that’s not to say flex does not have its uses and you should not be learning it though.

    1 Like

    Yes a helpful code using flex and padding set at 2 values.
    furthermore with this code i can change the boxes dimensions without decentering the content
    i have much more to learn about flexbox css
    Thank you guys

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.