Q&A
.question の中での上下中央ということなら、そうなっているように見えますが。
上下中央というか、上下に20pxあるパディングに挟まれている感じですね。
html
1<html lang='ja'> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 <link rel="stylesheet" href="style.css"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 </head> 10<body> 11 <div class='question'> 12 <p><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？<i class="fas fa-chevron-down"></i></p> 13 </div> 14</body>
css
1.question { 2 font-size: 20px; 3 padding: 20px; 4 border: 1px solid #e5e5e5; 5 border-radius: 5px 5px 0 0; 6 cursor: pointer; 7 margin-bottom: 5px; 8} 9.fa-question-circle { 10 color: #016ea9; 11} 12.fa-chevron-down { 13 color: #e5e5e5; 14 float: right; 15}
.fa-chevron-down というフォントアイコンを<p>要素の右端上下中央に配置するにはどうしたらいいですか？float: right;だと右寄せにはなりますが上下中央にはなりません。よろしくお願いいたします。
回答2件
0
float でレアウトすると今回のようにいろいろ面倒なことが発生します。
Flexboxでレイアウトするとシンプルかつ自由度の高いレイアウトが可能です。
css
1.fa-chevron-down { 2 color: #e5e5e5; 3/* float: right; */ 4 margin-left: auto; /* 右寄せ */ 5} 6.question > p{ 7 display: flex; 8 align-items: baseline; /* ベースラインを基準に配置 */ 9}
投稿2021/05/18 01:01
総合スコア34075
0
ベストアンサー
FontAwsomeのアイコンフォント部分とp要素の部分とで line-height が一致していないのが見た目上下中央に寄らない原因になっています。
line-heightは無指定の場合ブラウザに寄りますが1.2ないし1.3の値です。FontAwsomeのcssでは line-height: 1.0 を指定しています。
また、インライン要素iはpのtopを基準にレンダリングされます。i側の方がline-heightが小さいので中の文字が上に寄ってしまうのです。
簡単な解決方法は、pのline-heightをFontAwsomeに合わせることです。
css
1p{ 2 line-height: 1; 3}
ただ、この指定だとp内の文章が詰め詰めになってしまうので、pのline-heightを規定値のnormalから具体的な値に変更し、FontAwsome側のline-heightを無指定にしてしまうのが良いのではないかと思います。p側のline-heightがnormalのままだとi側のunsetが効きません。
css
1p{ 2 line-height: 1.3 /* 標準値はこのくらい */ 3} 4i.fas{ 5 line-height: unset; 6}
.fasに対してline-heightを指定する際は、FontAwsome側css指定の詳細度の関係上、.fasよりも適用範囲を絞って書かないと負けてしまいますので、 セレクタをi.fasで指定しています。
この指定で下図のような体裁になります。
投稿2021/05/17 17:37
総合スコア4447
あなたの回答
tips
プレビュー
