col内要素を右寄せ・均等揃え・上下中央寄せしたい

前提・実現したいこと

header右側のSNSアイコンを右寄せ均等揃えにしたい
文字やアイコンをcol内で上下中央寄せしたい
（追記：align-items-centerで解決しました）

発生している問題・エラーメッセージ

colで範囲を区切って右寄せ均等揃えにしたいんですけど
うまくいきません

また、上下中央寄せにpy-3を利用していますが
他に方法はあるのでしょうか？

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="マーレン劇団のトップページ">
6    <title>マーレン劇団公式サイト</title>
7    <link rel="icon" href="favicon.ico">
8    <link rel="stylesheet" href="stylesheet.css">
9    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
11    <link rel="stylesheet" href="slick-theme.css" type="text/css">
12
13    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
14    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
15    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
16
17    <script type="text/javascript">
18            $(document).ready(function(){
19                $('.slider').bxSlider({
20                    auto: true,
21                    pause: 5000,
22                });
23            });
24    </script>
25</head>
26<body>
27    <header class="container-fluid align-items-center">
28        <div class="row">
29            <img class="col-1" src="img/logo.png" alt="マーレン劇団">
30            <div class="col-8">
31                <div class="row">
32                    <div class="col-2">クリエイター</div>
33                    <div class="col-2">メディア</div>
34                    <div class="col-2">トピックス</div>
35                    <div class="col-2">エントリー</div>
36                </div>
37            </div>
38            <div class="col-3">
39                <div class="row">
40                    <i class="fa fa-twitter fa-2x fa-pull-right col-3" aria-hidden="true"></i>
41                    <i class="fa fa-facebook fa-2x fa-pull-right col-3" aria-hidden="true"></i>
42                    <i class="fa fa-youtube-play fa-2x fa-pull-right col-3" aria-hidden="true"></i>
43                </div>
44            </div>
45        </div>
46    </header>

試したこと

以前は下記のコードにしていましたが
画面幅が狭くなるとロゴが小さくなってしまうので
row colを利用しました

html
1<div class="header flex-row bg-dark text-white">
2        <img class="logo col-1 "  src="img/logo.png" alt="マーレン劇団" >
3        <div class="list-item m-4">クリエイター</div>
4        <div class="list-item m-4">メディア</div>
5        <div class="list-item m-4">トピックス</div>
6        <div class="list-item m-4">エントリー</div>
7        <i class="fa fa-twitter fa-2x fa-pull-right m-4" aria-hidden="true"></i>
8        <i class="fa fa-facebook fa-2x fa-pull-right m-4" aria-hidden="true"></i>
9        <i class="fa fa-youtube-play fa-2x fa-pull-right m-4" aria-hidden="true"></i>
10    </div>

よろしくお願いいたします。

s8_chu

2019/03/04 23:13

質問者さんが記述した CSS を質問文に追記していただけませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

.d-flex と .justify-content-center と、お気付きの.align-items-centerを使えば上下中央寄せになります。
お望みの通りかどうかはわかりませんが、以下はその一例です。

html
1<header class="container-fluid">
2  <div class="row">
3    <img class="col-1" src="img/logo.png" alt="マーレン劇団">
4    <div class="col-8 d-flex justify-content-center align-items-center">
5      <a href="#" class="py-2 px-3">クリエイター</a>
6      <a href="#" class="py-2 px-3">メディア</a>
7      <a href="#" class="py-2 px-3">トピックス</a>
8      <a href="#" class="py-2 px-3">エントリー</a>
9    </div>
10    <div class="col-3 d-flex justify-content-end align-items-center">
11      <a href="#" class="py-2 px-3"><i class="fa fa-twitter fa-2x"></i></a>
12      <a href="#" class="py-2 px-3"><i class="fa fa-facebook fa-2x"></i></a>
13      <a href="#" class="py-2 px-3"><i class="fa fa-youtube-play fa-2x"></i></a>
14      </div>
15    </div>
16</header>