通过css组织按钮和文本字段的位置

Question

我正在尝试组织这两个文本字段和搜索按钮的位置，因为你看到它们没有正确定位在css的content box div内，我不知道哪个影响谁在这里，我怎么能请确定位置是否正常，

这是我的CSS代码

body {
    background-image: url(images/stripe_4ea7f17e6b72307ec0cd17cc6d27f657.png);
    margin:50px 0px; padding:0px;
    text-align:center;
}

#content {
    border-radius: 15px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
border: 6px solid #BDF4FC;
width:50%;
height:150px;;
margin:0px auto;
    text-align:left;
    padding:15px;
    margin-top:12%;
    background-color:#ffffff;
}

#search {
    height: 42px;
    border: medium solid #63D1F2;

}
#button_style {
    background-image: url(images/search_button.png);
    height: 44px;
    width: 92px;
    background-color: #FFF;
    border: 0px none #FFF;

}

HTML code：

   <div id="content">
<form action="" method="get">
<input name="" type="text" id="search" /><input type="submit" value="" id="button_style" />
</form>

</div>

我该如何解决这个问题？

Answer 1

将vertical-align:middle;添加到#button_style。

Demo