Question

我想将标签与右侧的输入垂直对齐。我已经在这里阅读了其他问题，但似乎没有什么比我的例子好。这是我的尝试，但标签文字与顶部对齐。

的CSS：

label{
    float:left;
    width:50%;
    min-height: 20px;
    vertical-align: middle;
    clear: both;
    text-align:right;
    display: table-cell;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
     box-sizing: border-box;    
     padding-right: 10px;
}

input[type="text"]{
    width:50%;
}

.pers_form{
    width:100%;
    overflow:hidden;
    margin-bottom:5px;
    display: table;
}

HTML：

<div class="pers_form">
    <label for "example">Example</label>
    <input type="text" id="example" name="example" />
</div>

Answer 1

您display: table;上缺少<input>，float: left;上有<label>。固定代码（记住，有很多其他方法可以实现垂直对齐）：

label {
  width:50%;
  min-height: 20px;
  vertical-align: middle;
  clear: both;
  text-align:right;
  display: table-cell;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 10px;
}
input[type="text"] {
  width:50%;
  display: table-cell;
} 
.pers_form {
  width:100%;
  overflow:hidden;
  margin-bottom:5px;
  display: table;
}

http://jsfiddle.net/qop7d4av/

Answer 2

怎么样

.pers_form{
    width:400px;
}

label{
    width:200px;
}

input{
    width:200px;
    display:inline-block;
}

这应该将标签放在左侧，输入放在右侧内联

表格 - 标签和输入垂直对齐

2 个答案: