Question

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

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

Answer 1

您可以使用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

Answer 2

以下是我在评论中提出的答案：）

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

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

2 个答案: