html - 使用 CSS 垂直居中对象

Question

我的 HTML 前端部分是这样表达的:

<div class="input_wrap">
    <input type="text" title="money" class="input_text price" name="amount"
     onkeyup="this.value=this.value.replace(/[^\d]/,'');
     this.value=make_price_format(this.value);" 
     onblur="this.value=this.value.replace(/[^\d]/,'');
     this.value=make_price_format(this.value);">
     <span class="unit">Euro</span>
</div>

如您所见，有一个文本框，旁边有一个 span.unit“Euro”。

对应的CSS如下。

#register_apply .apply_table .input_wrap span.unit
{
   vertical-align:middle;
   text-align:center;
   padding-top:30px;
   margin-top:30px;
   font-size:22px;
   color:#646464;
}

#register_apply 和apply_table 是上层类名。如您所见，我添加了一些属性以使欧元垂直居中。由于文本框的高度是 60px，我想将“Euro”放在距离顶部大约 30px 的位置。但是我无法用 margin 和 padding 来控制位置。

接下来我能做什么？

Answer 1

要向元素添加填充，它必须是内联 block 或 block 。由于您希望您的单位与您的输入位于同一行，因此我会使用 inline-block:

.input_text {
  height: 60px;
}
.unit {
  display:inline-block;
  padding-top:30px;
}

<div class="input_wrap">
  <input type="text" title="money" class="input_text price" name="amount" onkeyup="this.value=this.value.replace(/[^\d]/,'');
     this.value=make_price_format(this.value);" onblur="this.value=this.value.replace(/[^\d]/,'');
     this.value=make_price_format(this.value);">
  <span class="unit">Euro</span>
</div>

如果你只是想要垂直对齐，那么你应该能够添加 vertical-align:middle to the textbox and that should work