用CSS垂直集中对象
用CSS垂直集中对象
提问于 2015-07-28 08:20:59
我的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“欧元”。
相应的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，我想把“欧元”从顶部大约30px的位置。但是我无法用margin和padding来控制这个地方。
接下来我能做什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-28 08:30:58
要将填充添加到元素中，必须是内联块或块。当您希望您的单元与您的输入处于同一条线上时，我将使用内联块：
.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>
如果您只是想要垂直对齐，那么您应该能够添加 to the textbox and that should work。
Stack Overflow用户
发布于 2015-07-28 08:29:33
.input_wrap{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0
}这是一个元素在各个方向的中心。您所要做的就是让您的父母position: relative;在顶部、左边等值周围游玩，这样就可以在您想要的地方注册它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31670940
复制相关文章
相似问题
腾讯云开发者
