Kevin Powell - Community•2y ago

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.

<form>
  <fieldset>
    <div class="field">
      <label>Name:</label>
      <input type="text" placeholder="Name" />
    </div>
    <button type="submit"> Submit </button>
  </fieldset>
</form>

<form>
  <fieldset>
    <div class="field">
      <label>Name:</label>
      <input type="text" placeholder="Name" />
    </div>
    <button type="submit"> Submit </button>
  </fieldset>
</form>

.field {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

input {
  margin-left: 5px;
}

.field {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

input {
  margin-left: 5px;
}

7 Replies

ArtoOP•2y ago

uploaded a pic just to show difference that is annoying me 💀

ghostmonkey•2y ago

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

ArtoOP•2y ago

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

ghostmonkey•2y ago

ghostmonkey•2y ago

just need to make both fonts the same: input, textarea, select { font: inherit; } then it should be good

ArtoOP•2y ago

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

ghostmonkey•2y ago

no worries, gl on your project, 🙂

Gaming

Programming

How to vertically align label next to input form in flexbox CSS