Menu icon Foundation
center images in Orbit

Hi,

I’m trying to center the images appearing in my orbit slider here:

http://basicrailsbox-51521.euw1.actionbox.io/

I've tried different solutions, the last of the being this:

.orbit_img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
            

         

…but none of them are working.

I'm using Foundation 4.

This is my code in the html file (I’ve removed the reference to “orbit_img” class):

<div class="row">
  <div class="small-6 large-centered columns centered_padding_bottom_40">
    <ul data-orbit
        data-options=
          "animation_speed: 100";
        >
    <%@clubs.each do |n|%>
      <li>
        <div>
          <%= image_tag(n.crest)%>
        </div>
      </li>
    <%end%>
    </ul>
  </div>
</div>        

         

Images have different heights now, but I will adjust them for the final version (image width will be probably different in some cases).

Is there any solution to this problem?

Thanks a lot!

Cesc Vilanova

centerimagesOrbitslider

Hi,

I’m trying to center the images appearing in my orbit slider here:

http://basicrailsbox-51521.euw1.actionbox.io/

I've tried different solutions, the last of the being this:

.orbit_img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
            

         

…but none of them are working.

I'm using Foundation 4.

This is my code in the html file (I’ve removed the reference to “orbit_img” class):

<div class="row">
  <div class="small-6 large-centered columns centered_padding_bottom_40">
    <ul data-orbit
        data-options=
          "animation_speed: 100";
        >
    <%@clubs.each do |n|%>
      <li>
        <div>
          <%= image_tag(n.crest)%>
        </div>
      </li>
    <%end%>
    </ul>
  </div>
</div>        

         

Images have different heights now, but I will adjust them for the final version (image width will be probably different in some cases).

Is there any solution to this problem?

Thanks a lot!

Cesc Vilanova

Christopher Buono almost 4 years ago

Dont mess with Foundations default position for the image.

Try this:
.orbit_img {
margin: 0 auto;
}

Orbit will make the position absolute, as long as the is relative (orbits default) this will work.

(basing off of Foundation 5, but it has similar operation, and your link isnt working.)

Bleh, insert code not working properly in chrome...

Joe Workman over 3 years ago

Don't forget to set to display:block!

img.orbit_img {
    display:block;
    margin: 0 auto;
}