9 replies

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

line-height

and

vertical-align: text-top

vertical-align: text-top

, but as far as I understood they only work when you use

inline-block

inline-block

elements.
AFAIK using

align-items:center

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

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

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

line-height

line-height

and

vertical-align: text-top

vertical-align: text-top

, but as far as I understood they only work when you use

inline-block

inline-block

elements.
AFAIK using

align-items:center

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

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads