0

I'm trying to style an aligned html form with display: table* CSS properties. Now I'm using something like this:

.form-aligned {
  display: table;
}
.form-aligned label {
  display: table-row;
}
.form-aligned .label {
  width: 100px;
}
.form-aligned .label,
.form-aligned input,
.form-aligned .error {
  display: table-cell;
}
<form class="form-aligned">
  <label>
    <span class="label">Age</span>
    <input/>
    <span class="error">Must be a number between 1 and 199</span>
  </label>
  <label>
    <span class="label">Last or First or Whatever name</span>
    <input/>
    <span class="error">Be serious please</span>
  </label>
</form>

It works perfectly but when label is too long (like in second input), input element is aligned to the top of the row. It looks a bit ugly. I would like an input to align in the middle of the row. But I can't figure out how to achieve that.

I tried to use vertical-align: middle, but it doesn't seem to work.

If I enclose an input into container, it'll work. But that's extra markup which I would like to avoid.

Here's fiddle: http://jsfiddle.net/oab5hbqo/1/ , below is a real table with correct vertical-align behaviour (what I'm trying to achieve with CSS).

0

2 Answers 2

2

input are replaced elements which can't be displayed (on most browsers) as table-cell.

In fact, if it was displayed as table-cell, it would grow to cover all row's height. That is, the height of a table cell is the same as the height of the table row, so there is no point in centering a table cell vertically.

So you must use a container, or think a non-tabular approach.

1

You can use display: inline-flex for this

Fiddle: http://jsfiddle.net/oab5hbqo/5/

Here is all of the css:

.form-aligned label {
    display: inline-flex;
    vertical-align: middle;
}
.form-aligned .label {
    width: 100px;
    border: 1px solid red;
}
span, input {
    margin: auto;
}
2
  • I think you didn't read "If I enclose an input into container, it'll work. But that's extra markup which I would like to avoid.".
    – Oriol
    Jan 21, 2015 at 19:23
  • Oops look like I did miss that part
    – Joe Sager
    Jan 21, 2015 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.