-1

I'm trying to align elements inside a well, the image's location changed, causing the well to get bigger.I think this question How to horizontally center a <div> in another <div>? helped me position stores' details in the correct place. But the image is causing the problem. 

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

I feel like I need a tag specifically for my image.But I'm not quite sure how to set it.

bootstrap.css

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

screenshot

Community
  • 1
  • 1
A1X
  • 1,099
  • 3
  • 8
  • 11

1 Answers1

2

Just give text-align: center; to .well will make all elements horizontally center.

.well{
     text-align: center;
}

Fiddle

ketan
  • 19,129
  • 42
  • 60
  • 98
  • This is good, but not exactly what I'm looking for. I need my image in the far left of the well. Then some space. Then a store description :) – A1X Mar 03 '16 at 04:08
  • @A1X You can give `margin-right: 20px;` to `img`. Or you can increase and decrease as per your requirement. – ketan Mar 03 '16 at 04:11
  • Checkout my screenshoot please. This what I've originally :) – A1X Mar 03 '16 at 04:28
  • @A1X So, what you want now? It is not center ? – ketan Mar 03 '16 at 04:35
  • I want to get ride of the space on the top. The well is bigger than needed :0. The image location is causing the well to get bigger. – A1X Mar 03 '16 at 04:38
  • @A1X If you want to remove space top from image then give `vertical-align: top;` to `img` and if you want to remove top space from `.inner` div then remove padding. like: `padding: 0 50px 50px;` to `inner`. https://jsfiddle.net/b2g6j7k7/2/ – ketan Mar 03 '16 at 04:42