文章の縦 中央揃えしたい場合のhtmlとCSS

Question

画像のようなイメージで、日付けの枠と本文を縦の中央にしたいです。
ただ、まだ知識が乏しく、自身では解決できません。
どうしたらよいでしょうか。

現状のコードは下記です。

わかりにくいですが、対応コードなどをご教授いただければ幸いです。
よろしくお願いいたします。

html

<section id="news">
<h2> NEWS </h2>

     ``<dl>``
         ``<a class="news2" href="">``
          ``<dt>``2019/1/1``</dt>``
           ``<dd>``あああああああああああああああああああ``</dd>``
          ``</a>``
       
         ``<a class="news2" href="">``
          ``<dt>``2019/1/1``</dt>``
           ``<dd>``いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい``<br>``

いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd>
</a>

         ``<a class="news2" href="">``
          ``<dt>2019/1/1</dt>``
           ``<dd>``うううううううううううう``</dd>``
          `` </a>``

      
       ``</dl>``

</section>

css

.news2{
display: block;
height: 40px;
margin-bottom: 10px;
background-color: #EFEFEF;
padding-left: 6px;
width: 695px;

}

#news dl a{
text-decoration: none;

}

#news dt{
font-size: 10px;
float: left;
color: #FFF;
background-color: #C9CACA;
width: 105px;
line-height: 29px;
text-align: center;
border-radius: 3px;

}
#news dd{
font-size: 13px;
display: inline;

}

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

どこを基準にして縦中央揃えをしたいのですか？

[ka.sh]

日付と本文を合わせた枠(グレー)の中央に、日付も本文も来るようにしたいです

Answer 1

試してないので、できなかったらすみません。

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

Comments

[ka.sh]

ご回答のとおりのコードを入れたら解決いたしました！
ありがとうございます！！

Answer 2

display: flex;
align-items: center;

のコードをnews2のCSSに指示をしたら解決いたしました。

Answer 3

vertical-align はインライン要素と表セルだけに適用できることに注意してください。つまり、ブロックレベル要素の縦方向の整列には使えないのです。
vertical-align - CSS: カスケーディングスタイルシート | MDN

なので、display:table-cellなどとして表セルとして取り扱う、display:inline-blockなどとしてインラインとして取り扱う、などの方法を使います。
前者の方がわかりやすいです。

Comments

[ka.sh]

ご回答ありがとうございます。

display: flex;
align-items: center;

のコードを入力すると解決ができました。
ありがとうございます。