I am struggling to center the text and icons within a box. I want them to be perfectly centered, like this:
https://i.sstatic.net/zKtfE.png
I've attempted the following: adding inline styles of align-content: center and justify-content: center to the div tag for row, but it hasn't worked. Any assistance or guidance would be greatly appreciated. You can view my current setup on jsfiddle by clicking the link below. Currently, all content is aligned to the left.
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>