Bootstrap 4字体令人惊叹

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>

​