Question

我想使文本左对齐，但居中对齐fa = home图标，请参见下文

<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

将text-center类添加到以下内容：

<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>

Answer 2

这是解决方案。

  bool operator() ()
   { return call(std::make_index_sequence<sizeof...(t)>{}); }

  template <std::size_t ... Is>
  auto call (std::index_sequence<Is...> const &)
   {
     auto tmp { m_d() }; // so m_d() is called only one time

     return m_f(static_cast<t>(std::get<Is>(tmp))...);
   }

Answer 3

在卡体上添加d-flex flex-column align-items-center类

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="card" style="width:300px">
  <h4 class="card-header">Accomdation</h4>
  <div class="card-body d-flex flex-column align-items-center">
    <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 4

<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" style="text-align: 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>

如果要使用CSS 将text-align: center添加到相应的div

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

4 个答案: