Html 用图像替换按钮标记并与文本字段对齐

这对很多人来说都很简单，我的CSS技能有些生疏，希望能找到解决这个问题的最佳方法

这是我当前的html代码

<div class="head_wrap">
<div id="logo"></div>
<div id="search">
<form action="">
    <input type="text" name="search" id="search" />
    <button id="replacement-2"></button>
</form></div>

</div>

这对于让徽标和文本字段与页边距对齐来说很好，但是我经常遇到一个问题，就是让button元素与文本字段正确对齐

也许有一种更简单的方法可以做到这一点，我希望有人能给我指出正确的方向

---

编辑：见下面我的答案，这解决了对齐中的问题。但是，如果有人有更好的方法来整理我的代码，我们将不胜感激。

似乎错误对齐的罪魁祸首很简单

#search {

    width: 241px;
    height: 30px;
    float: left;
    padding-top:18px;
    position: absolute;
    top:15px;
    right:40px;


}

更改位置：填充顶部：30px

---

我认为这是一个愚蠢的错误。

如果我理解正确，我会这样做（简化）：

所以基本上是相对定位，而不是绝对定位，最后按钮在表单中浮动

你可以对CSS做很多其他的事情来简化和减少代码

#search {

    width: 241px;
    height: 30px;
    float: left;
    padding-top:18px;
    position: absolute;
    top:15px;
    right:40px;


}

#wrap {}
#logo {float: left; position: relative;}
#search {float: right; position: relative}
#search #button {float: right;}