ブートストラップ4フォントAwesome

Question

私は少し問題があります。 divのすべてのアイコンを中央に配置したいほとんど何でも試しました。

<div class="row"> 
 
    <div class="bg-inverse p-x-1 col-xs-12 default-1 "> 
 
    <div class="row"> 
 
     <div class="col-xs-2 offset-xs-2"> 
 
     <i class="fa fa-facebook-square m-x-2 fa-3x p-y-1" style="display:center" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="col-xs-2 offset-xs-1"> 
 
     <i class="m-x-2 fa fa-twitter-square fa-3x p-y-1" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="col-xs-2 offset-xs-1"> 
 
     <i class="m-x-2 fa fa-youtube-play fa-3x p-y-1" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

このソリューションをお試しください。アイコンからm-x-2クラスを削除し、text-xs-centerをコンテナに追加しました。これは、フォントの素晴らしいアイコンのようなインライン要素を中心にする必要があります。 displayの値はcenterではありません。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script> 
 

 
<div class="row"> 
 
    <div class="bg-inverse p-x-1 col-xs-12 default-1 "> 
 
    <div class="row"> 
 
     <div class="col-xs-2 offset-xs-2 text-xs-center"> 
 
     <i class="fa fa-facebook-square fa-3x p-y-1" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="col-xs-2 offset-xs-1 text-xs-center"> 
 
     <i class=" fa fa-twitter-square fa-3x p-y-1" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="col-xs-2 offset-xs-1 text-xs-center"> 
 
     <i class=" fa fa-youtube-play fa-3x p-y-1" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>