css - 如何左对齐文本但居中 fa=home 图标

Question

我想左对齐文本，但居中对齐 fa=home icon 见下文

<div class="card" style="width:300px">
    <h4 class="card-header">Accomdation</h4>
    <div class="card-body">
    <i class="fa fa-home"; style="font-size:96px; align-content: center"></i>
    <div style="display: inline-block; text-align: left;">
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    <a href="#" class="btn btn-primary">Learn More</a>
    </div>
  </div>

Answer 1

添加文本中心类如下:

<div class="card-body text-center"> 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="card" style="width:300px">
    <h4 class="card-header">Accomdation</h4>
    <div class="card-body text-center">
    <i class="fa fa-home"></i>
    <div style="display: inline-block; text-align: left;">
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    <a href="#" class="btn btn-primary">Learn More</a>
    </div>
  </div>