How to vertically align label next to input form in flexbox CSS
Hey guys, really sorry for wasting someone's time on this probably stupid question, but I couldn't find a solid answer after 2 days of research by myself:
I am trying to build up a simple form using flexbox. But the problem is that label (specifically in flexbox) isn't pixel perfect centered next to input form (which is usually not a problem with inline block elements.) I am basically trying to line up placeholder text to label text so they would be on the same line, while in my example (see the img i attached) placeholder is slightly higher than the label.
I found few tricks setting up
line-height
and vertical-align: text-top
, but as far as I understood they only work when you use inline-block
elements.
AFAIK using align-items:center
in the flexbox parent should fix aligning problems on the main axis, but it didn't help.
The only solution I know is to just manually add margin-bottom
the label element, which obviously works, but I heard that applying extra margins might bad practice.
![](https://cdn.answeroverflow.com/1135587556222836858/exmpl.png)
7 Replies
uploaded a pic just to show difference that is annoying me š
![](https://cdn.answeroverflow.com/1135587955822563349/diff.png)
Did you try using the same font to see if it lines up? Also, from a UI / UX perspective, you don't generally want to write "Name Name" on your forms, just the field label is probably enough and you don't even need the placeholder
Sorry, I know that's not the modern way to do it, it just bothers my mind for some reason why it doesn't line up and how to fix such problems if they will appear. š
I tried to apply to different font through universal selector but its' still the same
![](https://cdn.answeroverflow.com/1135603307277205604/image_1.png)
just need to make both fonts the same:
input,
textarea,
select {
font: inherit;
}
then it should be good
Ooooh, thank you a lot brother!
I didn't realize that was a font problem. š
ā¤ļø
Never heard about textarea and select selectors, i guess first one is for placeholder text and second not sure
no worries, gl on your project, š