如何居中对齐表格的 label

Question

I am using my own classes and tags for HTML and CSS forms. I want to align the label text in middle.

I tried to use it using line height but it get messier when the text length is heavy.

and is it possible to use vertical align: middle; Because that's not even working

HTML:

<div class="type-details">
     <div class="col-xs-12 no-padding text-group">
          <span class="col-md-4 no-padding form-label">Placeholder:</span>
          <div class="col-md-7 no-padding">
               <input class="form-text" type="text">
          </div>
      </div>
</div>

CSS:

.type-details {
    border-bottom: 1px solid #e9eef0;
    padding: 20px;
    width: 60%;
    float: left;
}
.form-label {
    float: left;
    min-width: 17px;
    font-size: 11px;
    text-transform: uppercase;
    color: #62696d;
    margin-right: 15px;
}
.no-padding {
    padding: 0px;
}
input.form-text {
    background: #fff;
    border: 1px solid #dae2e6;
    font-size: 12px;
    color: #62696d;
    padding: 6px 8px;
    box-shadow: none;
    border-radius: 0;
    line-height: normal;
    display: inline-block;
    width: 100%;
    margin-bottom: 0px;
}

Check this fiddle https://jsfiddle.net/kuascjpo/2/ I want to align the span="form-label" vertically center

Answer 1

There are a few ways you can do this. Here is a fiddle: https://jsfiddle.net/sheriffderek/b9jg33b3/

Markup

<form action="" class="your-thing">

  <label class="input-w">
    <span class="label">First<br> name:</span>
    <input type="text" placeholder='sheriff'>
  </label>

  <label class="input-w">
    <span class="label">Last name:</span>
    <input type="text" placeholder='derek'>
  </label>

</form>

1. With display: inline-block;

The trick is that you need the element to be display inline- block . This way, you can use the vertical-align: middle; property of inline elements - and have the other properties of block elements too. Also, you don't want to use floats in this case. So,

.inline-block .input-w {
  display: block; // to stack them
  width: 100%;
}

.inline-block .label, .inline-block input {
  /* float: none; you may need this to overide previous float rules */
  display: inline-block;
  vertical-align: middle;
}

2. The other way would be to use flexbox display: flex;

This involves a little more concern about the markup and the parent of these inputs.

.flex-box {
  display: flex;
  flex-direction: column;
}

.flex-box .input-w {
  display: flex;
  flex-direction: row;
}

They both have their strengths and side-affects. : )

Answer 2

A simple approach/hack that works is to wrap the text inside the <label></label> tags in <p></p> tags, at which point, the text-align: center; property will work to center the text.

 label{ text-align: center; }

 <label><p>Your Text</p></label>

Answer 3

https://jsfiddle.net/cmckay/2xydfs87/

.text-group {
display:flex;
align-items:center;
}

Answer 4

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp