Question

我希望按钮和文字排成一行。我使用了垂直对齐，但它似乎没有用。（因此按钮以输入框为中心）

这是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/

提前感谢您的帮助！

Answer 1

简单的方法是从规则.elegantaeronamefinder .button

中删除边距设置

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

<强> Fiddle

Answer 2

您可以删除vertical-align并输入更大的输入高度，例如

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

此外，您可以从margin删除.elegantaeronamefinder .button{}，输入将位于按钮中间的水平。

Answer 3

您可以使用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;
}

Answer 4

由于.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;

}

如何输入[type = text]以与Button对齐？

4 个答案: