HTML5,CSS3フォームからinput（text）が若干下寄りになる

Question

実現したいこと

HTML5で検索フォームを作っていて、テキストボックスが若干、下寄りになってしまいます。
真ん中にしたいのですが、どうすればいいですか？
初心者なのでわかりやすくお願い致します。
※テキストボックスはわかりやすいように色は変えていません。

発生している問題・エラーメッセージ

### 該当のソースコード
**HTML**
<div> <!--検索バー(フォーム)-->
                    <form method="get" action="#" class="search_container">
                        <input type="text" size="33" placeholder="キーワード検索">
                        <input type="submit" value="&#xf002">
                    </form>
                </div>

**CSS**
/*-----------------フォーム--------------------*/
.search_container{
    background: #eee;
    box-sizing: border-box;
    position: absolute;
    border: 1px solid #999;
    padding: 3px 10px;
    border-radius: 20px;
    height: 2.0em;
    width: 260px;
    overflow: hidden;
}
.search_container input[type="text"]{
    border: none;
    height: 1.7em;
}
.search_container input[type="text"]:focus {
    outline: 0;
}
.search_container input[type="submit"]{
    cursor: pointer;
    font-family: FontAwesome;
    font-size: 1.3em;
    border: none;
    background: none;
    color: #3879D9;
    position: absolute;
    width: 2em;
    height: 2.2em;
    right: 0;
    top: -10px;
    outline : none;
}
/*------------------------------------------------------*/

/*------------------ハンバーガーメニュー-------------*/
.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 32px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.16);
}
.global-nav {
    position: fixed;
    right: -320px; /* これで隠れる */
    top: 0;
    width: 300px; /* スマホに収まるくらい */
    height: 100vh;
    padding-top: 40px;
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
    height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
    cursor: pointer;
    z-index: 300;
}
.global-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.global-nav__item {
    text-align: center;
    padding: 0 14px;
}
.global-nav__item a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #111;
}
.global-nav__item a:hover {
    background-color: #eee;
}
.hamburger__line {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 1px;
    background-color: #111;
    transition: all .6s;
}
.hamburger__line--1 {
    top: 10px;
}
.hamburger__line--2 {
    top: 16px;
}
.hamburger__line--3 {
    top: 22px;
}
.black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
    right: 0;
}
.nav-open .black-bg {
    opacity: .8;
    visibility: visible;
}
.nav-open .hamburger__line--1 {
    transform: rotate(45deg);
    top: 20px;
}
.nav-open .hamburger__line--2 {
    width: 0;
    left: 50%;
}
.nav-open .hamburger__line--3 {
    transform: rotate(-45deg);
    top: 20px;
}
/*--------------------------------------------*/
# 試したこと
CSSの.search_container input[type="text"]の部分で、heightを変えてもなぜか高さじゃなくサイズが変わりました。padingを追加して0にしても変わりませんでした。

Comments

[azuapricot]

CSSってこれで全部ですか？再現できるように提示してほしいです

[PauseRestart62]

フォームの部分のCSSはこれで全部ですが、ハンバーガーメニュー（画像には写っていない）のCSSも関係ないと思いますが、追加して更新しましたので確認お願い致します。

Answer 1

順当に行くなら両方にvertical-align: middleを設定することかな

MDN

Answer 2

高さがオーバーしてしまっているのだと思いますが、配置が面倒ならフレックスボックスレイアウトにすればいいでしょう。

form {
  display: flex;
  align-items: center;
}

form > :first-child {
  flex-grow: 1;
}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout