formとformの前につけた、title部分の高さをうまく揃えることができません。


flexboxを使って、最終的にはお問い合わせフォームを作成しようと思ております。
まだまだ????の域を出ず、大変お恥ずかしいのですが、ご教示いただけますと幸いです。
下記私の書いたコードに関しましても、ダメ出しなどいただけますと幸いです。

以下ＨＴＭＬコードです。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>タブキーのflexbox練習</title>
    <link rel="stylesheet" href="css/style1.css">
  </head>
  <body>
    <header>
      <div class="header-container">
        <h1>サンプル</h1>
      </div>
    </header>
    <div class="contents">
      <div class="contens-wrapper">
        <!-- ここにコメントを入れる。サンプルはここから　-->
        <div class="contents-container">
          <div class="contents-title">
            <p><span>必須</span>お名前</p>
          </div>
          <div class="family-name">
            <label>姓：<input type="text" name="family-name" value=""></label>
          </div>
          <div class="your-name">
              <label>名：<input type="text" name="your-name" value=""></label>
        </div>

        </div>


      </div>


    </div>
  </body>
</html>

以下ＣＳＳコードです。
@charset "UTF-8";
.contents-container{
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}
span{
  background-color:  #fcb603;
}
.contens-title{
  vertical-align: middle;
  padding:20px;

}
h1{
  background: #fcb603;
  padding: 10px;
  border-bottom: 10px solid #03fc07;
}

kei344

2020/05/04 02:34

コードブロックにはコード／エラーのみを入れるようにしてください。文章はコードブロック外にあるほうが読みやすいです。また、「うまくできない」とは「何がしたくて」「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

kai0310

2020/05/04 02:44

タイトルだけでは質問点が不明確なので質問本文に補足説明を行ってください。また編集される際はkei344さんの修正の依頼も必ず行ってください。 > 下記私の書いたコードに関しましても、ダメ出しなどいただけますと幸いです。コードレビューは質問ではなく依頼です。こちらは推奨されていません。

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょうか。

css
1.contents-container{
2  display: flex;
3  flex-flow: row;
4  justify-content: space-around;
5  align-items: center; /*追加*/
6}
7span{
8  background-color:  #fcb603;
9}
10.contents-title {
11/*  vertical-align: middle; 不要 */
12  padding:20px;
13}