Bootstrap: How to center image in panel heading?

Question

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>

Answer 1

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

Answer 2

Here's the answer i put in the comment :)

Try adding text-center class instead of center. An image is an inline element so will understand the text-align:center style.