cssを利用した上下中央寄せの方法

Question

お世話になります。

text属性とimage属性の２つのipuntタグを用意して横並びにした検索ボックスを作成したのですが、
どうしてもテキストボックスを中央寄せに出来ません。

添付した画像下側の様に、
テキストボックスを上下中央寄せにするcssの記述方法をご教授願いします。

ソース：

<div class = "div"> <input class = "text" type="text" /> <input class = "image" type="image" src="picture/picture.jpg" /> </div>

宜しくお願い致します。

Answer 1

div.div > input {
  vertical-align: middle;
}

あるいは

div.div {
  display: flex;
  align-items: center;
}

Comments

[deranail]

ありがとうございました。
上記の通りで自分が意図したい様に表示できました。