在 Bootstrap 的框中对齐文本和图标答案

【问题标题】：Aligning Text and Icon in the center of box in Bootstrap在 Bootstrap 的框中对齐文本和图标
【发布时间】：2020-05-02 11:43:24
【问题描述】：

我正在尝试将框中的文本和图标对齐到它的中心。我希望它像这样居中：

我尝试了以下方法：添加 align-content: center 和 justify-content: center 作为行的 div 标签中的内联样式，但没有运气。任何帮助或线索表示赞赏。我提供了一个 jsfiddle 链接来向您展示我现在拥有的东西。至此，所有内容都留下了。

https://jsfiddle.net/silosc/76ktyveu/4/

<div class="row" style="width:100%">
    <div class="report-card-i report-card-i-height">
        <h3 class="m-l-35 p-t-25 p-b-10">Stats</h3>
        <div class="fa-orange m-t-10 m-b-15">
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <i class="fa fa-star m-r-15">Stat1</i>
                </div>

                <div class="col-sm-2 col-xs-3">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <i class="fa fa-star m-r-15">Stat2</i>
                </div>

                <div class="col-sm-2 col-xs-3">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <i class="fa fa-star m-r-15">Stat3</i>
                </div>

                <div class="col-sm-2 col-xs-3">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
   .report-card-i{
    background: orange;
    box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-top: 30px;
}

 .report-card-i-height {
    min-height: 280px;
    height: auto;
    width: 100%;
        }

.report-name {
    font-family: Questrial;
    font-weight: bold;
    color: #f0522f !important;
        }
</style>

【问题讨论】：

试试text-align: center;
我建议你使用弹性布局来实现你想要的。 Here 是一个很好的起点。（ps：justify-content 和 align-items/align-content 配合flex布局显示使用，否则无用）
您问题中的 CSS 甚至与您提供的图片不太相似。
在图标上使用 line-height 属性

标签： html css bootstrap-4

【解决方案1】：

试试这个：.fa { margin-left: 50%;变换：translateX（-50%）； }, 如果您想在图标和文本之间留出空间，请尝试： .fa-star:before { padding-right: 20px; }

【讨论】：

【解决方案2】：

由于您使用的是引导程序，因此您可以使用 text-left 类。还有很多引导边距和填充类设置错误......边距是mr-1 到mr-5。填充格式相同

.report-card-i {
  background: orange;
  box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  margin-top: 30px;
}

.report-card-i-height {
  min-height: 280px;
  height: auto;
  width: 100%;
}

.report-name {
  font-family: Questrial;
  font-weight: bold;
  color: #f0522f !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="width:100%">
  <div class="report-card-i report-card-i-height">
    <h3 class="ml-5 pt-5 pb-2">Stats</h3>
    <div class="fa-orange mt-5 mb-5">
      <div class="row">
        <div class="col-sm-3 col-xs-3 text-center">
          <i class="fa fa-star">Stat1</i>
        </div>

        <div class="col-sm-2 col-xs-3">
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-sm-3 col-xs-3 text-center">
          <i class="fa fa-star m-r-15">Stat2</i>
        </div>

        <div class="col-sm-2 col-xs-3">
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-sm-3 col-xs-3 text-center">
          <i class="fa fa-star m-r-15">Stat3</i>
        </div>

        <div class="col-sm-2 col-xs-3">
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：