[Stuck] How to center a element

Hello. How can I apply horizontal align to <label> element? If I do this <label><p>3</p></label> everything works fine. I don’t understand why <p> element has auto margin (centred) when <label> is not.
URL: playcode. io/howtolabel

Hi @raziEiL

What task are you doing? And what CSS code have you created so far?

I’m trying to align element inside div. I’m new so and I can’t post a workable link to my things.chrome_EAb4FmkyFv

The items aren’t horizontally aligned in their respective containers though? div1 and div3 are right aligned, div2 and div4 are left aligned.

Bit confused about what you’re trying to do here. You want the 3 to line up with the 4? i.e. vertically centred.

Something like:

body {
  background: #2b2b2b;
  font-size: 36px;
  font-family: Helvetica neue, roboto;
  color: white;
}

.main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  background: black;
}

.common {
  display: flex;
  width: 50%;
  align-items: center;
}

#div1, #div3 {
  justify-content: flex-end;
}

#div1 {
  background: purple;
}

#div2 {
  background: orange;
}

#div3 {
  background: olive;
}

#div4 {
  background: gray;
}

1 Like

You should read this awesome post: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2 Likes

Thank you! This is what I needed!

No idea why you want a label in there, after all, this isn’t a form element. Do have a look at that post, it’s extremely useful :slight_smile:

I write Survey Form that’s why. Yes, I’ll read it. I also found a useful game Flexbox Froggy - A game for learning CSS flexbox

Ha, I like it! :slight_smile: level 1 has exactly the flex-end code you needed!