如何居中对齐表格的标签

Question

我正在使用自己的HTML和CSS表单的类和标签。我想在中间对齐标签文本。

我尝试使用行高来使用它，但是当文本长度很重时会变得更加混乱。

是否可以使用vertical align: middle;因为这甚至不起作用

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

检查这个小提琴https://jsfiddle.net/kuascjpo/2/我想对齐span =“form-label”垂直居中

Answer 1

有几种方法可以做到这一点。这是一个小提琴：https://jsfiddle.net/sheriffderek/b9jg33b3/

标记

import GameKit

class FactModel {  // See, this is a class now.
    let facts = [ "Test1", "test2", "Test3", "test4", "Test5", "test6", "test7", "Test8", "test9", "test10", "Test11", "test12", "test13", "Test14", "test15", "test16", "Test17", "test18" ]
    var index = 0  // This is the property that will allow us to track what fact we are up to.

    func getRandomFact() -> String {  // No change to this method.
        let randomNumber = GKRandomSource.sharedRandom().nextIntWithUpperBound(facts.count)

        return facts[randomNumber]
    }

    func getNextFact() -> String {
        let fact = facts[index]  // We grab the fact before we increment the index.
        if index < facts.count - 1 {  // We make sure we did not give the last fact in the list.
            index += 1  // We increment the index so the next fact is ready to go.
        } else {
            index = 0  // We wrap around to the first fact because we just gave the last one.
        }    
        return fact
    }

    func getPreviousFact() -> String {
        let fact = facts[index]
        if index < facts.count - 1{
            index -= 1
        } else {
            index = 0
        }
        return fact
    }
}

let myFact = FactModel()

1。使用<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>

诀窍是你需要元素显示为内联 - 块。这样，您可以使用内联元素的display: inline-block;属性 - 并且还具有块元素的其他属性。此外，在这种情况下，您不想使用浮动。所以，

vertical-align: middle;

2。另一种方法是使用flexbox .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; }

这需要更多关注标记和这些输入的父级。

display: flex;

他们都有自己的优势和副作用。 ：）

Answer 2

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

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

Answer 3

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