Bootstrap4でFontawesomeアイコンを貼ると中央揃えにならない

Bootstrap4とFontawesomeで以下のロゴを等間隔にバランスよく横並びに表示したいのですが、添付の写真のようにそれぞれのロゴが左に寄ってしまっています。

HTML
1    <div class="container border mt-3">
2		<div class="row">
3			<div class="col" style="display: table;">
4				<i class="fab fa-facebook-f" style="display: table-cell; vertical-align: middle;"></i>
5			</div>
6			<div class="col" style="display: table;">
7				<i class="fab fa-twitter" style="display: table-cell; vertical-align: middle;"></i>
8			</div>
9			<div class="col" style="display: table;">
10				<i class="fab fa-instagram" style="display: table-cell; vertical-align: middle;"></i>
11			</div>
12		</div>
13	</div>

ちなみにstyle部分を無くしても、ほとんど変わりませんでした。

###質問する前に参考にしたサイト
-display: table-cell;を利用した方法
-justify-content-*を利用した方法

主にこちらのサイトを参考にしてレイアウトを変えれるか試行錯誤しましたが、解決には至りませんでした。

m.ts10806

2019/04/04 03:01

毎回書くのが面倒かもしれませんが、今はじめてこの質問を見た人は使われているBootStrapのバージョンを知りません。そこも含めて追記願います。

ironman

2019/04/04 03:39

ありがとうございます。了解致しました。ちなみにBootstrap4となります。

m.ts10806

2019/04/04 03:41

あぁ・・質問本文に追記していただけたら（こちらのコメント欄はデフォルト非表示ですので）

m.ts10806

2019/04/04 03:41

見落としてました。ついてますね。失礼しました。

ironman

2019/04/04 03:44

いえいえ。以後気をつけるCheck要素が増えました。ありがとうございます。そうなんですね。コメント欄はてっきり、みんな見れると思ってました。

m.ts10806

2019/04/04 03:49

みんな見れますがデフォルトは非表示で、１回目のクリックでは最新３件のみの表示になります。

m.ts10806

2019/04/04 06:50

力業での質問だったので力業での回答してますが、ドキュメントからBootStrapの機能で対応できないか探すのが先決です。 https://getbootstrap.com/docs/4.0/utilities/vertical-align/

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

回答2件

ベストアンサー

HTML
1        <div class="row text-center">
2            <div class="col">
3                <i class="fab fa-facebook-f"></i>
4            </div>
5            <div class="col">
6                <i class="fab fa-twitter"></i>
7            </div>
8            <div class="col">
9                <i class="fab fa-instagram"></i>
10            </div>
11        </div>

投稿2019/04/04 04:06

x_x

総合スコア13749

ironman

2019/04/04 06:31

ご回答ありがとうございます。確かになりました。ちなみに縦方向の場合だとvertical-align: middle;でよろしいのでしょうか。

x_x

2019/04/04 06:53

CSS でもいいですが、Bootstrap を使っているなら align-middle でいいのでは？ https://getbootstrap.com/docs/4.3/utilities/vertical-align/

ironman

2019/04/04 10:48

やはりそうですよね。ご返答ありがとうございます????。

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

水平方向に真ん中に寄せたいのでしたらtext-alignをcenterで指定してください。

vertical-alignは垂直方向の位置、つまり縦で見た位置を調整するものです。

投稿2019/04/04 03:48

編集2019/04/04 03:50

m.ts10806

総合スコア80892

m.ts10806

2019/04/04 06:49

力業での質問だったので力業での回答してますが、 BootStrapの機能で対応できないか探すのが先決です。 https://getbootstrap.com/docs/4.0/utilities/vertical-align/

ironman

2019/04/04 10:47

ありがとうございます。Bootstrap便利ですね！(◎_◎;)。助かりました。

m.ts10806

2019/04/04 11:44

基本的なレイアウトなら大抵用意されてると思った方が良いです。ドキュメントは英語なので敬遠しがちになりますが、読み込めればそれだけシンプルなやり方で実現が可能になります。せっかくフレームワーク使ってるのにインラインCSSベタ書きのオンパレードは余程の理由がない限り避けましょう。楽にレイアウトするためのフレームワークなので。

ironman

2019/04/04 12:52

はいそうですねフレームワークの便利さわChainerやPytorchで経験してます笑。英語の勉強にもなりますしね。楽しんでやってみます。

ironman

2019/04/04 12:53

少しずつ、綺麗なソースが作れるよう頑張ります！

m.ts10806

2019/04/04 12:53

そのあたりご存じなのでしたら、もう少しフレームワークを信頼して、活用していきましょう。

m.ts10806

2019/04/04 12:53

はい。がんばってください。