Bootstrap：如何在面板标题中居中图像？答案

【问题标题】：Bootstrap: How to center image in panel heading?Bootstrap：如何在面板标题中居中图像？
【发布时间】：2013-12-14 16:50:37
【问题描述】：

我有一类“面板标题中心”，但面板中的图像没有居中。我怎样才能做到这一点？

<%= link_to 'Back', things_path %>

<div class='row'>
  <div class='col-md-offset-2 col-md-8'>
    <div class='panel panel-default'>
    <div class='panel-heading center'>
      <%= image_tag @thing.image.url(:medium) %>
    </div>
    <div class='panel-body'>
    <p>
      <strong><%= @thing.title %></strong>
    </p>
    <p>
      <%= @thing.description %>
    </p>
    <p>
      <%= @thing.user.email %>
    </p>
    <% if @thing.user == current_user %>
      <%= link_to 'Edit', edit_thing_path(@thing) %> 
    <% end %>
    </div>
  </div>
</div>

【问题讨论】：

你试过把它放在第 4 列，把外面的 2 列留空吗？
@TomRudge 不确定你的意思。我对 Bootstrap 很陌生。我该怎么做呢？
尝试添加文本中心类而不是中心。图像是内联元素，因此可以理解 text-align:center 样式。我不熟悉 Bootstrap，所以希望这是正确的。
@grimmus 这行得通！将其作为答案，以便我批准。

标签： html css ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

这是我在评论中给出的答案:)

尝试添加文本中心类而不是中心。图像是内联元素，因此可以理解 text-align:center 样式。

【讨论】：

【解决方案2】：

您可以使用 Bootstrap text-center 类。

<div class="row">
  <div class="col-md-offset-2 col-md-8">
    <div class="panel panel-default">
      <div class="panel-heading text-center">
       ..
      </div>
      <div class="panel-body">
      ..
      </div>
     </div>
  </div>
</div>

演示：http://bootply.com/97325

【讨论】：