[Stuck] How to center a element

HTML-CSS
1

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

2

Hi @raziEiL

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

3

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

4

chrome_XQbDxGo8km
chrome_XQbDxGo8km904×680 24.5 KB

5

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

02
021362×384 5.81 KB

1 Like
6

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

2 Likes
7

Thank you! This is what I needed!

8

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:

9

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

10

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