Vue.jsのv-forで描画したList Itemにリンクをつけて、display: flexとalign-items: centerを指定したい

前提・実現したいこと

リストの中のdivの文字が長くなった場合の改行を、そのリストの中に上下中央揃えで収めたい。

aタグがなければ、liにdisplay: flexとalign-items: centerを指定すればOKでした。

aタグをつけると、display: flexが適用されなくなったので、
div5を付け加えてdisplay: flexを指定した。
さらにalign-items: centerを指定するにはどうすれば良いでしょうか。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6        <link href="main.css" rel="stylesheet">
7    </head>
8    <body>
9        <div  id="app" class="div1">
10            <ul>
11                <li v-for="item in items">
12                    <a v-bind:href="item.url">
13                        <div class="div5">
14                            <div class="div2">{{ item.date }}</div>
15                            <div class="div3">{{ item.title }}</div>
16                            <div class="div4">{{ item.time }}</div>
17                        </div>
18                    </a>
19                </li>
20            </ul>
21        </div>
22    <script src="main.js"></script>
23    </body>
24</html>

css
1.div1 {
2    background-color: pink;
3}
4li {
5    border: 1px solid black;
6    height: 60px;
7    width: 200px;
8    /* align-items: center; */
9    /* display: flex; */
10}
11.div2 {
12    background-color: skyblue;
13}
14.div3 {
15    background-color: orange;
16}
17.div4 {
18    background-color: green;
19}
20.div5 {
21    display: flex;
22}

vue
1new Vue({
2    el: '#app',
3    data: {
4        items: [
5            {
6              date: "2019-01-01",
7              title: "ああああああああ",
8              time: "2時間",
9              url: "https://www.yahoo.co.jp",
10            },
11            {
12              date: "2019-01-02",
13              title: "いいい",
14              time: "3時間",
15              url: "https://www.google.co.jp/",
16            }
17        ],
18  }
19})