Bootstrap 4 Font Awesome

我有一點問題。我想要將div中的每個圖標居中。幾乎試過任何東西。Bootstrap 4 Font Awesome

<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>

來源

2016-09-29 Jakub Szczepanik

添加類文本爲中心，以COL-XS-2的div –

它沒有幫助：/ –

對不起，應該是文字-XS-中心引導4.見我的答案下面。 –

嘗試這種解決方案。我從圖標中刪除了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>

來源

2016-09-30 17:10:28

Bootstrap 4 Font Awesome

回答

相關問題