努力使我的Font Awesome图标居中

我无法将字体真棒的图标和按钮居中。我尝试通过CSS文件夹来完成操作，还尝试了内联样式。我在下面的示例中都将它们都包含在内。有人可以告诉我为什么它不居中吗？解决此问题的最佳方法是什么？

https://jsfiddle.net/silosc/0emaydqn/11/

Here is my HTML folder:
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="report-card-sm">
    <h2>
       We're sorry,this page is under construction.
    </h2>
    <p>We reccomend you try the following:</p>
    <ul class="fa-ul">
        <li><span class="fa-li"><i class="fa fa-calendar" style="align-content: center "></i></span>Checking your date range and readjust it</li>
        <li><span class="fa-li"><i class="fa fa-file-text" style="align-content: center "></i></span>Importing your file by clicking on the Upload Data button</li>

    </ul>
    <br />
    <br />
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</div>

这是我的CSS文件夹：

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul i {

  justify-content: center;
}

button {
  justify-contern: center;
}

只需从li中删除<span>标签，然后直接在<i>标签中使用font-awesome即可。我还为<i>标签或 fa 图标添加了一些填充，以便它不会与<li>文本一起折叠。

要使buttons居中，只需将它们添加到div中并为其赋予属性div text-align:center;

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul li .fa{
padding-right:5px;
}


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

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="report-card-sm">
    <h2>
       We're sorry,this page is under construction.
    </h2>
    <p>We reccomend you try the following:</p>
    <ul class="fa-ul">
        <li><i class="fa fa-calendar"></i>Checking your date range and readjust it</li>
        <li><i class="fa fa-file-text"></i>Importing your file by clicking on the Upload Data button</li>
        
    </ul>
    <br />
    <br />
    <div class="center-div">
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
    </div>
</div>

希望这对您有所帮助。

fa-li类导致此问题。因为它包含作为绝对元素的CSS。您可以简单地从fa-li标记中删除span类。要保持空间，您可以添加填充或边距值。下面的代码段可以帮助您。

要使按钮居中，我用div包裹了按钮，text-align:center最初是一个块元素。通过将div CSS添加到buttons（block）元素中，它将子元素（h2 { text-align: center; } p { text-align: center; } ul i { justify-content: center; } button { justify-contern: center; } ul li>span { margin-right: 5px; } .btn-wrapper{ text-align: center; }）居中。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="report-card-sm">
  <h2>
    We're sorry,this page is under construction.
  </h2>
  <p>We reccomend you try the following:</p>
  <ul class="fa-ul">
    <li><span><i class="fa fa-calendar" style="align-content: center "></i></span>Checking your date range and readjust it</li>
    <li><span><i class="fa fa-file-text" style="align-content: center "></i></span>Importing your file by clicking on the Upload Data button</li>
  </ul>
  <br />
  <br />
  <div class="btn-wrapper">
    <button class="btn-orange fa-orange">Go Back</button>
  <button class="btn-orange fa-orange">Upload Data</button>
  </div>
</div>

in_array

尝试使用flexbox：

ul{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

CSS：

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

在HTML 4.01中使用<center>标签：

<center>
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</center>

在HTML5中：您需要将div中的按钮分组并使用text-align: center

<div style="text-align: center">
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</div>

JSfiddle

您应将text-align: center;放在父元素上（创建一个？）。

并为<span class="fa-li">创建一个新类以取消设置position: absolute;，并可能设置一个margin-right来取消图标和文本的显示

在处理django项目时，我遇到了同样的问题。我所做的只是添加了html doctype标签，而我的图标又回到了中心。

您可能想尝试一下

抱歉，我没有时间为您创建一个可行的解决方案，但这是我的想法：

我看到您有3个块元素构成了整个屏幕（{<div class="report-card-sm">，<ul class="fa-ul">和<li>两次）

除了justify-content: center;是使用display: flex;的一部分外，只要不添加display: flex;，它就不会起作用。

编辑： 这可能对您有帮助：How to horizontally center a <div>?

努力使我的Font Awesome图标居中

sword_smile 回答：努力使我的Font Awesome图标居中

大家都在问