Kevin Powell - Community•12mo ago

How can i center a item in a flex row div, when has 2 childs?

I have 2 itens in the header, i tried margin: auto for the element, but he has a margin since the end of the first element. By this way, the middle of my second element isn't on the middle of the screen: i want the middle of the section of buttons, in the middle of the screen

4 Replies

AugustosOP•12mo ago

consider the code:

<header className="flex justify-center">
  <section className="h-full p-2">
    <img />
   </section>
   <section className="flex h-full m-auto">
      <button>
       ....
      </button>
      <button>
        ...
       </button>
     </section>

<header className="flex justify-center">
  <section className="h-full p-2">
    <img />
   </section>
   <section className="flex h-full m-auto">
      <button>
       ....
      </button>
      <button>
        ...
       </button>
     </section>

clevermissfox•12mo ago

You have flex on the section with buttons, justify content center

AugustosOP•12mo ago

? yes, i have, with margin auto on the section that i want in the center

clevermissfox•12mo ago

You have flex on the containing block which is putting the two sections next to each other. They are taking up all the space they can, 50% for each side. You have to also center the content within those sections if you want it centered, it doesn’t inherit If you want the middle of the section with the buttons to be in the middle of the screen it would need to be full width. You don’t need two sections.But I don’t wanna confuse you. You need to decrease the width of the section with the image, or there’s no room for the buttons to move over

Gaming

Programming

How can i center a item in a flex row div, when has 2 childs?