замена тегов кнопок изображениями и выравнивание по текстовому полю

Question

Для многих это просто, мои навыки работы с 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>

Здесь я пытаюсь добиться того, чтобы элемент DIV был централизован на странице, логотип выровнен по левому полю, а окно поиска выровнено по правому полю (текстовое поле и элементы кнопок выровнены соответственно)

Методы, которые я сам исследовал в Интернете, похоже, вызывают некоторые проблемы.

Вот мой текущий CSS.

.head_wrap {

width: 1024px;
margin: 0px auto;
position:relative;

}

#logo {

width:334px;
height: 100px;
position: absolute;
top:0;
left:0;
background-image: url('../images/logo.png');
background-repeat: no-repeat;

}

#search {

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


}

#search input {


border: 0;
background: url('../images/search_bg.png') top left no-repeat; 
width: 211px; 
height: 25px;
padding-bottom: 3px;
padding-top: 3px;
padding-left: 5px;
padding-right:5px; 
font-size: 75%;  
color: #FFF;
float:left;

}

#replacement-2 {
width: 30px;
height: 30px;
padding: 50px 0 0;
margin: 0;
border: 0;
right:0px;
top:0;
background: transparent url('../images/search_button.png') no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
float:right;
}
form>#replacement-2 { /* For non-IE browsers*/
height: 0px;

}

Это хорошо для того, чтобы логотип и текстовое поле были выровнены по полям, однако у меня постоянно возникает проблема с тем, чтобы элемент кнопки правильно совмещался с текстовым полем.

Вероятно, есть более простой способ сделать это, я надеялся, что кто-то может указать мне правильное направление.

РЕДАКТИРОВАТЬ: см. Мой ответ ниже, это решает проблему в выравнивании. Однако, если у кого-то есть лучший способ сделать это, чтобы привести мой код в порядок, мы будем очень признательны.

Answer 1

Если я правильно понимаю, я бы сделал это (упрощенно):

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

Таким образом, в основном относительное позиционирование вместо абсолютного позиционирования, и, наконец, кнопка плавает прямо в форме.

И есть много других вещей, которые вы можете сделать с этим CSS, чтобы упростить и уменьшить код.

Answer 2

Похоже, виновником неправильного выравнивания была простая вещь,

#search {

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


}

Где изменено: отступ: 30px;

Думаю, глупая ошибка.