如何獲得輸入[type = text]以與Button對齊？

我希望按鈕和文本排列。我已經使用垂直對齊，但它似乎並沒有工作。（使按鍵與輸入框中心）如何獲得輸入[type = text]以與Button對齊？

這裏是HTML：

<div class="elegantaeronamefinder"> 


<div> 
    <input type="text" id="search_name" name="search_name" /> 
    <input type="submit" class="button" value="GO" id="search_button" name="search_button" /> 
</div> 

</div>

CSS：

.elegantaeronamefinder{ 
    width: 800px; 
    margin-right: auto; 
    margin-left: auto; 
    background:#F2F7FA;/*#DDF0F8;*/ 
    padding: 30px 30px 0px 30px; 
    min-height: 120px; /*make additional service box bigger*/ 
    font: 12px Arial, Helvetica, sans-serif; 
    -webkit-box-shadow: 0 0 5px #868686; 
    box-shadow: 0 0 5px #868686; 
    color: #666; 
    border-collapse: collapse; 
} 



.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea { 
    color: #888; 
    width:250px; 
    padding: 5px 4px 0px 5px; 
    margin-right: 6px; 
    margin-left: 5px; 
    border: 1px solid #CEE2E7; 
    background: #FBFBFB; 
    outline: 0; 
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); 
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); 
    font: 200 20px/20px Arial, Helvetica, sans-serif; 
    vertical-align: middle; /*added in to align*/ 

}  
.elegantaeronamefinder .button{ 
    padding: 10px 30px 10px 30px; 
    background: #44B6F5; 
    border: none; 
    color: #FFF; 
    font-weight:bold; 
    vertical-align: middle; 
    margin-bottom: 20px; 
    margin-top: 5px; 

}

這裏是演示： http://jsfiddle.net/5CN67/2/

感謝您提前你的幫助！

來源

2014-03-28 ben_dchost

嘗試改變下邊距來7px的用於.elegantaeronamefinder .button – Tushar

簡單的方法是從規則中刪除的頁邊距設置.elegantaeronamefinder .button

.elegantaeronamefinder .button{ 
    padding: 10px 30px 10px 30px; 
    background: #44B6F5; 
    border: none; 
    color: #FFF; 
    font-weight:bold; 
    vertical-align: middle; 
}

Fiddle

來源

2014-03-28 09:24:05 SW4

正是我一直在尋找。謝謝！ –

您可以刪除垂直對齊，並投入更大的高度，這樣

.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea { 
    background: none repeat scroll 0 0 #FBFBFB; 
    border: 1px solid #CEE2E7; 
    box-shadow: 1px 1px 2px rgba(200, 200, 200, 0.2) inset; 
    color: #888888; 
    font: 200 20px/20px Arial,Helvetica,sans-serif; 
    height: 32px; 
    margin-left: 5px; 
    margin-right: 6px; 
    outline: 0 none; 
    padding: 5px 4px 0 5px; 
    width: 250px; 
}

http://jsfiddle.net/5CN67/9/

此外，您可以從.elegantaeronamefinder .button{}中刪除margin，輸入將在按鈕中間的位置。

來源

2014-03-28 09:28:12 user2167382

好辦法。感謝您的輸入 –

您可以使用display: table + display: table-cell + vertical-align: middle

Fiddle

HTML：

<div class="elegantaeronamefinder"> 
    <div class="wrapper"> 
     <input type="text" id="search_name" name="search_name" /> 
     <input type="submit" class="button" value="GO" id="search_button" name="search_button" /> 
    </div> 
</div>

CSS：

.elegantaeronamefinder { 
    width: 800px; 
    margin-right: auto; 
    margin-left: auto; 
    background:#F2F7FA; 
    /*#DDF0F8;*/ 
    padding: 30px 30px 0px 30px; 
    min-height: 120px; 
    /*make additional service box bigger*/ 
    font: 12px Arial, Helvetica, sans-serif; 
    -webkit-box-shadow: 0 0 5px #868686; 
    box-shadow: 0 0 5px #868686; 
    color: #666; 
    border-collapse: collapse; 
    display: table; 
    text-align: center; 
} 

.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea { 
    color: #888; 
    width:250px; 
    padding: 5px 4px 0px 5px; 
    margin-right: 6px; 
    margin-left: 5px; 
    border: 1px solid #CEE2E7; 
    background: #FBFBFB; 
    outline: 0; 
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); 
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); 
    font: 200 20px/20px Arial, Helvetica, sans-serif; 
    vertical-align: middle; 
    /*added in to align*/ 
} 

.elegantaeronamefinder .button { 
    padding: 10px 30px 10px 30px; 
    background: #44B6F5; 
    border: none; 
    color: #FFF; 
    font-weight:bold; 
    vertical-align: middle; 
    /*added in to align*/ 
    margin-bottom: 6px; 
    margin-top: 5px; 
} 

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

來源

2014-03-28 09:29:26 JunM

感謝您的輸入！雖然第一種方法正是我想要的 –

你有 '搞砸' 的垂直對齊因額外的米.button類中的精確聲明。

如果刪除它們，他們一致：

JSfiddle Demo

CSS

.elegantaeronamefinder{ 
    width: 800px; 
    margin-right: auto; 
    margin-left: auto; 
    background:#F2F7FA;/*#DDF0F8;*/ 
    padding: 30px 30px 0px 30px; 
    min-height: 120px; /*make additional service box bigger*/ 
    font: 12px Arial, Helvetica, sans-serif; 
    -webkit-box-shadow: 0 0 5px #868686; 
    box-shadow: 0 0 5px #868686; 
    color: #666; 


    border-collapse: collapse; 
} 



.elegantaeronamefinder input[type="text"], 
.elegant-aeronamefinder textarea { 
    color: #888; 
    width:250px; 
    padding: 5px; 
    margin-right: 6px; 
    margin-left: 5px; 
    border: 1px solid #CEE2E7; 
    background: #FBFBFB; 
    outline: 0; 
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); 
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); 
    font: 200 20px/20px Arial, Helvetica, sans-serif; 
    vertical-align: middle; /*added in to align*/ 

} 

.elegantaeronamefinder .button{ 
    padding: 10px 30px 10px 30px; 
    background: #44B6F5; 
    border: none; 
    color: #FFF; 
    font-weight:bold; 

}

來源

2014-03-28 09:29:29

謝謝你的幫助！ –

如何獲得輸入[type = text]以與Button對齊？

回答

相關問題