写真のように日付と、TOPIC と書いてあるタグを中央揃えにしたいです。
今の状態では上に引っ付いたままなので、これを縦の中央に寄せたいです
そこで line-height
プロパティを使って中央揃えにしようと試しましたが、<span>タグが一番上についた状態で高さが伸びてしまうだけになります。
そこで vertial-align: middle
を使って文字を中央に寄せようとしましたが、何も変化がありませんでした
html
1 2<section class="news"> 3 <ul class="news_list"> 4 <li class="news_item"> 5 <a href="#"> 6 <time class="news_item_time">2015.1.21</time> 7 <span class="news_item_category">TOPIC</span> 8 <span class="news_item_ttl">CSSでここまでできる?!</span> 9 </a> 10 </li> 11 </ul> 12</section>
css
1 2.news_list { 3 max-height: 220px; 4 width: 660px; 5 margin-bottom: 30px; 6 list-style: none; 7 background: grey; 8 overflow-y: auto; 9} 10.news_item { 11 height: 50px; 12} 13 14.news_item a{ 15 display: block 16} 17 18.news_item:nth-last-child(even){ 19 background: blueviolet; 20} 21 22.news_item_time { 23 display: inline-block; 24 width: 15%; 25} 26 27.news_item_category { 28 display: inline-block; 29 width: 8%; 30 border-radius: 5px; 31 background-color: beige; 32 text-align: center; 33 line-height: 40px; 34 vertical-align: middle; 35} 36 37.news_item_ttl { 38 width: 75%; 39 margin-left: 100px; 40}