井里的horizantolly algin元素

Question

我试图在井内对齐元素，图像的位置发生了变化，导致井变大。我认为这个问题How to horizontally center a <div> in another <div>?帮助我定位商店＆＃39;细节在正确的地方。但是图像导致了这个问题。

<% @stores.each do |store| %>
  <div class="row">
        <div class="well">
         <%= link_to image_tag(root_url + "/images/" + store.filename, size: "100x100", alt: store.filename), store %>
           <div id="inner">
            <h3><%=store.name%></h3>
            <h4><%=store.foodType%></h4>
            <p><%=store.description%></p>
            <% if current_user != store.user %>
            <%= rating_for store, "overall", :enable_half => true,:half_show => true,:disable_after_rate => false %>
            <% end %>
          </div>    
        </div>
      </div> 
    <% end %>

我觉得我需要专门为我的图像添加标签。但我不太确定如何设置它。

bootstrap.css

   #inner {
    padding: 50px;
    display: inline-block;
   }

Answer 1

只需将text-align: center;提供给.well，即可使所有元素横向居中。

.well{
     text-align: center;
}

<强> Fiddle