Q&A
前提・実現したいこと
デモ
↑テキストとSVGを含んだブロック要素のaタグがあります。
テキストとSVGそれぞれの垂直位置を中央に揃えたいです。
ただし、flexやaタグに固定値の高さを設定する、などはしたくないです。
発生している問題・エラーメッセージ
Windows、Chromeで見ると、SVGが若干上にズレているように見えます。
該当のソースコード
html
1<head> 2 <style> 3 * { 4 box-sizing: border-box; 5 } 6 7 a { 8 display: block; 9 text-decoration: none; 10 color: white; 11 background: tomato; 12 padding: 0.5em 1em; 13 } 14 15 svg { 16 display: inline-block; 17 width: 1rem; 18 height: 1rem; 19 fill: white; 20 } 21 </style> 22 </head> 23 24 <body> 25 <a href="#"> 26 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> 27 <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --> 28 <path 29 d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z" 30 /> 31 </svg> 32 リンク 33 </a> 34</body>
試したこと
svgにvertical-align: middleを設定してみると、svgが下にズレているように見えました。
また、svgとaタグそれぞれにline-height: 1を設定してみましたが、変化はありませんでした。
回答1件
0
ベストアンサー
一例です。
css
1 svg { 2 display: inline-block; 3 width: 1rem; 4 height: 1rem; 5 fill: white; 6 vertical-align: bottom; 7 transform: translateY(-4px); 8 }
追記
safariだとこれでもズレてるので
リンク => <span>リンク</span> として、下記cssを追記すると
ズレがなくなる。
css
1 span { 2 vertical-align: middle; 3 }
投稿2021/07/07 10:28
編集2021/07/07 10:48
総合スコア1373
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。