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
I’m trying to align element inside div. I’m new so and I can’t post a workable link to my things.
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
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
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! level 1 has exactly the flex-end
code you needed!