Question

我正在尝试将2个堆叠的FA图标居中，但文本对齐似乎没有任何效果。这是代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-md-3">
  <span class="fa-stack fa-4x">
            <i class="fa fa-circle fa-stack-2x text-primary"></i>
            <i class="fa fa-user fa-stack-1x fa-inverse"></i>
        </span>
  <h4 class="text-center">Title</h4>
  <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Answer 1

将.text-center添加到父<div>
从.text-center

<h4>

将.text-left添加到<p>（除非您希望段落文字也居中）。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-md-3 text-center">
  <span class="fa-stack fa-4x">
            <i class="fa fa-circle fa-stack-2x text-primary"></i>
            <i class="fa fa-user fa-stack-1x fa-inverse"></i>
        </span>
  <h4>Title</h4>
  <p class="text-muted text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Answer 2

简短而简单的答案是添加此标签

<center>
the text that you wanted to place in center
</center>

Answer 3

试试这个

$bills = DB::table('bills')
    ->where('provider_id', Auth::user()->company()->first()->id)
    ->where('status', 'paid')
    ->get();

$adjustedBills = $bills->map(function ($bill, $key) {
    $bill->date_paid = Carbon::parse($bill->date_paid)->timezone('America/New_York')->toDateTimeString();
    return $bill;
});

return $dates->map(function ($item, $key) use ($interval, $adjustedBills) {
    return $adjustedBills->filter(function ($date, $key) use ($item, $interval) {
        return $date->date_paid >= $item && $date->date_paid <= $this->returnRangeFromInterval($item, $interval);
    })->pluck('amount_due')->sum();
})->flatten();

现场演示 - https://jsfiddle.net/gzkjp2jk/

居中字体 - 真棒叠加

3 个答案: