inputの中身の文字が真ん中に来ません。

Question

このような検索窓を作ったのですが、検索ボタンの文字が真ん中にきません。
どうしたら真ん中に来ますか？
flexやpaddingなど色々試してみたのですが、今度はどれが必要でどれが不要なのかも分からなくなってしまったので、
そのご指摘も頂けると助かります。
よろしくお願いします。

<form class="mv-input" method="get">
          <input class="search-input" type="text" placeholder="地名、業界、会社名などを入力（例：東京駅）"> 
          <input class="search-btn" type="submit" value="検索">
</form>

.mv-input {
  box-shadow:0 2px 4px rgba(0,0,0,.28);
  border-radius: 8px;
  display: flex;
  margin-top: 8px;
  max-width: 480px;
}

.search-input {
  font-size:16px;
  display:inline-block;
  height:50px;
  padding:8px;
  outline:none;
  width:100%;
  border:2px solid black;
  border-right:none;
  border-radius: 8px 0 0 8px;
}
.search-btn {
  display:flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  cursor: pointer;
  padding:0 ;
  font-size:32px;
  height:50px;
  padding:8px;
  outline:none;
  width:100px;
  border:2px solid black;
  border-radius: 0 8px 8px 0;
  background-color:#ffcc00;
  box-sizing:border-box;








}

Comments

[m.ts10806]

Flexは本件とは無関係かと思います。
https://teratail.com/tags/Flex

Answer 1

こちらでいかがでしょうか?

.search-btn {
  /* 追加 */
  line-height: 1;

  /* 上下の余白を増やしたり減らしたりして調整してください。 */
  padding: 8px 8px;
}

Answer 2

.search-inputにもbox-sizing: border-box;が必要では。こちらで検証すると、inputとbuttonで高さがずれていました。
そこらへんを考慮して、共通部分をまとめて設定できるようにすると、こんな感じでしょうか。

.mv-input {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .28);
    border-radius: 8px;
    display: flex;
    margin-top: 8px;
    max-width: 480px;
}

.mv-input>* {
    height: 50px;
    padding: 8px;
    box-sizing: border-box;
    outline: none;
    border: 2px solid black;

}

.search-input {
    width: 100%;
    font-size: 16px;
    border-right: none;
    border-radius: 8px 0 0 8px;
}

.search-btn {
    width: 100px;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    background-color: #ffcc00;
}

Comments

[takawork]

うまく行きましたありがとうございます。
ところで>*とは何を指すのでしょうか？
>は親セレクタの特定要素のみに対して使うスタイルとわかったのですが、*を合わせるとよく分かりませんでした。
予想は親要素全体に入れるもの？だと思います。(今回は質問で親要素を書いていなかったから、>*と表現した？みたいな。)
例えば以下のHTMLだと
>*はmv-leftと書き換えることが可能でしょうか？

<div class="mv-left">
<div class="mv-left-text">
<h1>あなたにぴったりの<br>広告代理店を<br>本気で見つけ出します。</h1>
</div>
<div class="mv-left-search">
<p>掲載物件数<span>5,000</span>件</p>
</div>
<form class="mv-input" method="get">
<input class="search-input" type="text" placeholder="地名、業界、会社名などを入力（例：東京）">
<input class="search-btn" type="submit" value="検索">
</form>
</div>

[Daregada]

>は「直接の子要素」、*は「すべての要素」を意味します。ですから、親要素ではなく、.mv-inputのすべての子要素に共通の設定が書いてあります。