Question

我有这个

：

  <div class="card-body">
   <div class="padding_5">
    <div class="icon-center">
      <i class="fa fa-twitter" aria-hidden="true"></i>
    </div>
   </div>
  </div>

padding_5仅包含填充CSS card-body是引导程序4

我尝试过：

[class*="icon-"] {
    display: inline-block;
    width: 100%;
}

.icon-center i {
  text-align: center;
}

，并且此：

.icon-center {
  margin: auto;
  display: block;
}

都没有用。这些是我在SO上看到的最受关注的回复。

我的代码有什么问题？

我希望它在卡体内水平居中。

也不是引导程序。我在没有CSS或卡体的单独页面上进行了测试。还是同样的问题。

Answer 1

.icon-center {
text-align:center;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="card-body">
   <div class="padding_5">
    <div class="icon-center">
      <i class="fa fa-twitter" aria-hidden="true"></i>
    </div>
   </div>
  </div>

Answer 2

您在这里有三个选择

1。父级：text-align: center

将text-align: center设置为body。

2。子级：display: block和text-align: center

将display: block设置为.icon-center。

3。子display: block，设置width和margin: auto

将display: block，width: 20px和margin: auto设置为.icon-center。

https://codepen.io/blackcityhenry/pen/WPexKp

Answer 3

只需添加text-align：center;到父卡体

.card-body{
  border: 1px solid red;
  text-align: center;
}

.padding_5 {
  padding: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />

<div class="card-body">
  <div class="padding_5">
    <div class="icon-center">
      <i class="fa fa-twitter" aria-hidden="true"></i>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

字体真棒图标未居中

3 个答案: