質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

3回答

8616閲覧

line-height をしても文字が中央になりません

bouyomisan

総合スコア87

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/07/22 02:22

編集2022/01/12 10:55

写真のように日付と、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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/07/22 02:26

CSSに括弧とセミコロンがありません。また、過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。
bouyomisan

2017/07/22 02:38

すみません、sass でやっていたのでカッコもセミコロンもありません。ありがとうございます!ほったらかしにしているものがたくさんありました。今から整理してきます!
kei344

2017/07/22 02:40

sass ではなく出力されたCSSを提示されたほうが回答を得やすいと思います。
guest

回答3

0

line-heightで文字を中央するのが目的なら

css

1.news_item a{ 2 display: block; 3 line-height: 50px;//追加 4} 5 6.news_item_category { 7 // display: inline-block;削除 8 padding: 2px;//追加 9 width: 8%; 10 border-radius: 5px; 11 background-color: beige; 12 // text-align: center;削除 13 // line-height: 40px;削除 14 // vertical-align: middle;削除 15} 16 17

とaタグにline-heightをつけ、.news_item_categoryをinline-blockを削除すると解決すると思います。
他にもflexを使う方法もあります。

css

1.news_item a{ 2 //display: block;削除 3 display: flex;//新規追加 4 align-items: center;//新規追加 5 height: 100%;//新規追加 6} 7 8.news_item_time { 9 width: 15%; 10 //display: inline-block;削除 11} 12 13.news_item_category { 14 width: 8%; 15 padding:2px;//新規追加 16 border-radius: 5px; 17 background-color: beige; 18 //display: inline-block;削除 19 //text-align: center;削除 20 //line-height: 40px;削除 21 //vertical-align: middle;削除 22} 23 24.news_item_ttl { 25 width: 75%; 26 margin-left: 100px; 27} 28 29 30 31

投稿2017/08/07 01:37

LanHma

総合スコア192

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

以下のように行ってみてはいかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 .news_list { 8 width: 660px; 9 max-height: 220px; 10 margin-bottom: 30px; 11 list-style: none; 12 background: grey; 13 } 14 15 .news_item { 16 height: 50px; 17 } 18 19 .news_item a { 20 display: block; 21 } 22 23 .news_item:nth-last-child(even) { 24 background: blueviolet; 25 } 26 27 .news_item_time { 28 display: inline-block; 29 30 width: 15%; 31 } 32 33 .parent { 34 line-height: 50px; 35 display: inline-block; 36 height: 50px; 37 } 38 39 .news_item_category { 40 width: 8%; 41 text-align: center; 42 vertical-align: middle; 43 border-radius: 5px; 44 background-color: beige; 45 } 46 47 .news_item_ttl { 48 width: 75%; 49 margin-left: 100px; 50 } 51 </style> 52</head> 53<body> 54<section class="news"> 55 <ul class="news_list"> 56 <li class="news_item"> 57 <a href="#"> 58 <time datetime="2015-01-21" class="news_item_time"> 59 2015.1.21 60 </time> 61 <span class="parent"> 62 <span class="news_item_category"> 63 TOPIC 64 </span> 65 </span> 66 <span class="news_item_ttl"> 67 CSSでここまでできる?! 68 </span> 69 </a> 70 </li> 71 </ul> 72</section> 73</body> 74</html>

投稿2017/07/22 02:59

編集2017/08/07 20:59
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

vertical-align: middle;はブロック要素では効かないのでdisplay: table-cell;にしてみてはどうですか?

投稿2017/07/30 09:19

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問