首页 文章

将标签与输入垂直对齐

提问于
浏览 次
7

我目前正在将旧的HTML表单转换为不使用表格 . 标签需要固定的宽度，我已经使用本网站的答案实现了这一点 . 目前的代码如下：

HTML

<div id="form">
    <label for="field1">Name&nbsp;</label>
    <input type="text" id="field1" value="default name" />
</div>

CSS

label {
    float: left;
    width: 50px;
    white-space: nowrap;
}
input {
    display: block;
    overflow: hidden;
    width: *;
}
#field1 {
    width: 150px;
}

目前，标签在顶部垂直对齐 . 如何将标签和字段垂直对齐到中心？

Edit ：我想要这样做，因为它基本上是硬编码而不是真正的垂直对齐到中间 .

根据我在这里收到的一些建议，我已经清理了一些代码 . 请参阅以上编辑的代码 .

我在 label 尝试了 vertical-align: middle; ，但它没有't work. Please note that the user'平台将是IE .

html css vertical-alignment

5 回答

  • 5

    如果我做对了，你希望 label 和 input 垂直居中对齐W.R.T而不是页面 . 为此，有几种方法 .

    Flexbox方式

    如果您想使用CSS世界中的新东西并准备好未来，请使用flexbox . 示例 -

    .fieldHeading {
  width: 50px;
}
.fieldSpan {
  overflow: hidden;
}
#field1 {
  width: 150px;
}
/*flexbox approach.
* height and background added for clarity.
*/

#form {
  height: 100px;
  background: #bada55;
  display: flex;
  align-items: center;
}

    <div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

    垂直对齐方式

    当一行上的 label 和 input 都为 inline-block 元素时，这种方法很有效 . 示例 -

    .fieldHeading {
  width: 50px;
  vertical-align:middle;
}
.fieldSpan {
  overflow: hidden;
  vertical-align:middle;
}
#field1 {
  width: 150px;
}

    <div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

    高度和行高Duo

    这也很有效，但如果你的标签很大并且有可能包裹成多行，那就太可怕了 . 示例 -

    .fieldHeading {
  width: 50px;
}
.fieldSpan {
  overflow: hidden;
}
#field1 {
  width: 150px;
}

/*line-height and height be same for parent
* background added for clarity.
*/
#form {
  line-height: 40px;
  height: 40px;
  background: #bada55;
}

    <div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

    我希望这些不仅可以解决这个问题，还可以解决所有其他垂直对齐问题 .

    回复于
  • 0

    您可以使用 line-height 或 margin-bottom ，直到获得满意的结果 .

    Example

    #form label {
    line-height:1.4;
    margin-bottom:2px;
}

    这会将选择器应用于表单下的所有标签 . 如果您想要具体，可以使用特定的css类，如 .fieldHeading 而不是 #form label .

    回复于
  • 1

    你需要这样的吗？

    <div id="form">
    <div class="valign">
        <label for="field1" class="fieldHeading">Name&nbsp;</label>
        <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
    </div>
</div>

<style>
.fieldHeading {
    float: left;
    width: 50px;
}
.fieldSpan {
    display: block;
    overflow: hidden;
    width: *;
}
#field1 {
    width: 150px;   
}

#form {display: table;height:100%;}

.valign {
    display: table-cell;
    vertical-align: middle; 
}

</style>
    回复于
  • 0

    我认为，解决方案边缘底部，使用你想要的任何px

    .fieldHeading {
    float: left;
    width: 50px;
    margin-bottom: 3px;
}
    回复于
  • 2

    使用：

    .fieldHeading {
  display: inline-block;
  width: 50px;
  vertical-align: middle;
}
#field1 { width: 150px; }

    设span为内联类型 .

    你真的不需要用于封闭输入元素的span .

    回复于

相关问题