Title: [Plugin: Easing Slider] center the image
Last modified: August 19, 2016

---

# [Plugin: Easing Slider] center the image

 *  [rfgoetz](https://wordpress.org/support/users/rfgoetz/)
 * (@rfgoetz)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/plugin-easing-slider-center-the-image/)
 * I was able to center the image by playing with the css. However, I could not 
   get the shadow to center.
 * Can you add an option to center the image OR add padding (that way I don’t have
   to change the css for every upgrade)?
 * Bob
 * [http://wordpress.org/extend/plugins/easing-slider/](http://wordpress.org/extend/plugins/easing-slider/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [MatthewRuddy](https://wordpress.org/support/users/matthewruddy/)
 * (@matthewruddy)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/plugin-easing-slider-center-the-image/#post-1687610)
 * Sorry I don’t exactly understand what your trying to achieve. Do you want the
   slider in the center of your page?
 * To do this you could try putting the slider in a div and then setting that div
   to margin: 0 auto;. That should center it.
 *  Thread Starter [rfgoetz](https://wordpress.org/support/users/rfgoetz/)
 * (@rfgoetz)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/plugin-easing-slider-center-the-image/#post-1687612)
 * I’d like to have an option (in addition to adding padding) to center the images
   and the shadow.
 * I did try putting the slider in a div as follows:
 * <div class=”myeasingslider”>[easingslider]</div>
 * I then added a .myeasingslider class to my CSS.
 * However, WordPress, renders Easing Slider outside of the div I created. The html
   is below. Not sure how to fix that.
 * Bob
 * —————————————
 * <div class=”post-bodycopy clearfix”> <!– Easing Slider –>
    <div class=”lof-container”
   style=”height:300px;padding-right:0px;padding-top:0px;padding-left:0px;padding-
   bottom:0px;”> <div class=”lof-slidecontent” id=”lofslidecontent45″ style=”border:
   3px solid #ccc;width:480px;height:300px;”> <div class=”preload” style=”background-
   image: url([http://localhost/wp/wp-content/plugins/easing-slider/images/indicator.gif](http://localhost/wp/wp-content/plugins/easing-slider/images/indicator.gif));
   background-attachment: initial; background-origin: initial; background-clip: 
   initial; background-color: rgb(255, 255, 255); display: none; background-position:
   50% 50%; background-repeat: no-repeat no-repeat; “>
 *  </div>
    <div class=”lof-main-outer” style=”background: #fff;width:480px;height:
   300px;”> <ul class=”lof-main-wapper” style=”width: 2400px; left: -1920px; “>
    - <img src=”[http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3299.jpg&#8221](http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3299.jpg&#8221);
      style=”width:480px;” alt=””>
    - <img src=”[http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_2968.jpg&#8221](http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_2968.jpg&#8221);
      style=”width:480px;” alt=””>
    - <img src=”[http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_2828.jpg&#8221](http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_2828.jpg&#8221);
      style=”width:480px;” alt=””>
    - <img src=”[http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3292.jpg&#8221](http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3292.jpg&#8221);
      style=”width:480px;” alt=””>
    - <img src=”[http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3029.jpg&#8221](http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3029.jpg&#8221);
      style=”width:480px;” alt=””>
    - </div> <div class=”lof-navigator-wapper” style=”bottom:-35px;left: 0;padding:
      5px 5px;”>
       <div class=”lof-navigator-outer” style=”width: 125px; height: 
      15px; “> <ul class=”lof-navigator” style=”width: 125px; left: 0px; “> <li 
      style=”height: 15px; width: 25px; ” class=””><span>.</span><li style=”height:
      15px; width: 25px; ” class=””><span>.</span><li style=”height: 15px; width:
      25px; ” class=””><span>.</span><li style=”height: 15px; width: 25px; ” class
      =””><span>.</span><li style=”height: 15px; width: 25px; ” class=”active”><
      span>.</span> </div> </div>
    -  </div>
       </div><img src=”[http://localhost/wp/wp-content/plugins/easing-slider/images/shadow_large.png&#8221](http://localhost/wp/wp-content/plugins/easing-slider/images/shadow_large.png&#8221);
      style=”width:480px; padding-left:0px;padding-bottom:0px;padding-top:6px;margin-
      left:3px;” alt=””><!– End of Easing Slider –><div style=”height: 1.4em; visibility:
      hidden;”>A</div> <div style=”height: 1.4em; visibility: hidden;”>A</div> <
      div class=”myeasingslider”></div> <div style=”height: 1.4em; visibility: hidden;”
      >A</div> <hr size=”2″>
 *  Thread Starter [rfgoetz](https://wordpress.org/support/users/rfgoetz/)
 * (@rfgoetz)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/plugin-easing-slider-center-the-image/#post-1687672)
 * I figured it out need to change two files:
 * Change slider.css:
    ——————
 * Change second line:
 * From
    `.lof-container {}.lof-slidecontent{ position: relative;}`
 * to
    `.lof-container {}.lof-slidecontent{ position: relative; margin-left: auto;
   margin-right: auto;}`
 * 2. add to end of css file:
 *  img.lof-center {
    display: block; margin-left: auto; margin-right: auto;}
 * Change easingslider.php
    ———————–
 * Find the code to add the shadow Add [`class="lof-center"`] and delete [`margin-
   left:'.$slider->bwidth.'px`]
 * From:
 *  `echo '<img src="'.WP_PLUGIN_URL.'/easing-slider/images/shadow_'.$shadowstyle.'.
   png" style="width:'.$width.'px; padding-left:'.$padleft.'px;padding-bottom:'.
   $padding.'px;padding-top:'.$padtop.'px;margin-left:auto;margin-right:auto;" alt
   ="" />'; ?><!-- End of Easing Slider --><?php`
 * To:
 *  `echo '<img src="'.WP_PLUGIN_URL.'/easing-slider/images/shadow_'.$shadowstyle.'.
   png" style="width:'.$width.'px; padding-left:'.$padleft.'px;padding-bottom:'.
   $padding.'px;padding-top:'.$padtop.'px;" alt="" class="lof-center" />'; ?><!--
   End of Easing Slider --><?php`
 *  Plugin Author [MatthewRuddy](https://wordpress.org/support/users/matthewruddy/)
 * (@matthewruddy)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/plugin-easing-slider-center-the-image/#post-1687673)
 * So you managed to figure it out? Good 🙂
 *  [nbc81](https://wordpress.org/support/users/nbc81/)
 * (@nbc81)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/plugin-easing-slider-center-the-image/#post-1687784)
 * Hi,
    I am trying to get the Easing Slder to appear in the centre of my page when
   added to the header.php, currently it is indented to the left.
 * I have followed the links and instructions above from rfgoetz but it hasnt worked.
 * I am fairly new to php and css so still learning.
 * Any guidance would be appreciated – test site for now to see it is [http://nickburt.co.uk](http://nickburt.co.uk)
 * Thanks
 *  [nbc81](https://wordpress.org/support/users/nbc81/)
 * (@nbc81)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/plugin-easing-slider-center-the-image/#post-1687785)
 * No worries guys, site seems to have updated itself now, must have been a lag 
   of somesort
 * thanks

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘[Plugin: Easing Slider] center the image’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/easing-slider_262626.svg)
 * [Easing Slider](https://wordpress.org/plugins/easing-slider/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/easing-slider/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/easing-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/easing-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/easing-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/easing-slider/reviews/)

 * 6 replies
 * 3 participants
 * Last reply from: [nbc81](https://wordpress.org/support/users/nbc81/)
 * Last activity: [14 years, 9 months ago](https://wordpress.org/support/topic/plugin-easing-slider-center-the-image/#post-1687785)
 * Status: not resolved