前提・実現したいこと
リストの中の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})
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/26 06:48