垂直集中的對象與CSS

我的HTML前端側部分被這樣表示：垂直集中的對象與CSS

<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控制位置。

接下來我該做什麼？

來源

2015-07-28 jooShin

@akash除非你給他們'display：inline-block;'那就是。 – AlexG

要添加填充到元素，它必須是嵌入塊或塊。當你想要你的單位是在同一行作爲輸入，我會去與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

來源

2015-07-28 08:30:58 Pete

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

這使元素在所有方向上居中。所有你需要做的事給你的父母position: relative;玩弄頂部，左邊等值將它對齊到你想要的位置

來源

2015-07-28 08:29:33 AlexG

垂直集中的對象與CSS

回答

相關問題