Q&A
（質問文は編集できます）teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）
また、回答部分に書いているものを削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> 6 <link rel="stylesheet" href="css/bootstrap.min.css"> 7 <link rel="stylesheet" href="style.css"> 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 9 <title>Bpテンプレ</title> 10</head> 11<body> 12 <div class="alert alert-info alert-dismissible fade show align-middle" role="alert"> 13 <i class="far fa-comment-dots"></i><span id="s">今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</span> 14 <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 15 <span aria-hidden="true">×</span> 16 </button> 17 </div> 18 19 <script src="js/jquery-3.3.1.slim.min.js"></script> 20 <script src="js/bootstrap.bundle.min.js"></script> 21</body> 22</html>
CSS
1i { 2 font-size: 2rem; 3} 4 5#s { 6 font-size: .9rem; 7}
アイコンの部分とテキストの部分それぞれ縦中央にしたいのですが、テキストの部分がアイコンの下部に揃ってしまいます。
https://gyazo.com/1e8a92c25447416b72a7ddb58f0a5031
テキストも中央にしたいのですが、どうしたらいいでしょうか。
class="d-flex align-items-center"
などいろいろ試しましたが、うまくいきません。
どうかお知恵をお貸しください！！！
回答2件
0
ベストアンサー
CSS
1i { 2 font-size: 2rem; 3 vertical-align: middle; /*追加*/ 4}
こちらでいかがでしょうか？
vertical-align の値は%なども指定できますので、数値を変えながら、よきところに収められるよう調整してみてはいかがでしょうか。
参考→ https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align
投稿2019/04/02 02:29
総合スコア525
あなたの回答
tips
プレビュー
