Centering <li> centent using flexbox

HTML & CSS
1

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>    
</ul>

    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

    • 2

    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)

    3

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

    1600Ă—900 102 KB

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

    4

    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.

    5

    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
    6

    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

    7

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