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＆＃34;欧元＆＃34;。

相应的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，我想放置＆＃34; Euro＆＃34;距离顶部约30px个位置。但我无法使用margin和padding控制该地点。

接下来我该怎么办？

Answer 1

.input_wrap{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0
}

这使一个元素在所有方向上居中。所有你需要做的就是让你的父母position: relative;玩弄顶部，左边等值以将其分配到你想要的地方

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用CSS垂直集中对象

2 个答案: