Bootstrap: How to center image in panel heading?

css, html, ruby, ruby-on-rails, twitter-bootstrap

Solution

You can use the Bootstrap `text-center` class.

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

Demo: http://bootply.com/97325

Problem

I have a class of 'panel-heading center', but the image in the panel isn't centering. How can I make that happen? ``` <%= 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> ```

Original source