title: GentleSelect : align center relative to the select box
body: <p>I use plugin '<a href="http://shawnchin.github.io/jquery-gentleSelect/" rel="nofollow">gentleSelect</a>' (multi column dropdownliast), by default list is right-aligned. 
  how to make the list (more column) centered relative to the select box</p>
  
  <p>with original configuration :</p>
  
  <pre><code>              page
                1  2   3    4   5
                6  7   8    9   10
                ....
  </code></pre>
  
  <p>I want like this :</p>
  
  <pre><code>                        page
                    1  2   3    4   5
                    6  7   8    9   10
                    ....
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div id="page" align="right"&gt;
  &lt;script type="text/javascript"&gt;
       $(document).ready(function() {
          $('#page_sel').gentleSelect({ 
              columns: 18,
              itemWidth: 4,
              title: "الصفحة",
              hideOnMouseOut: true
          });
  
  
  });
  &lt;/script&gt;
  &lt;select id="page_sel" style="display: none;" &gt;
  &lt;?php 
  for($i=1;$i&lt;=604;$i++){
  ?&gt;
  &lt;option id="&lt;?php echo $i;?&gt;" value="&lt;?php echo $i;?&gt;" &lt;?php if(....) {echo "selected";}?&gt; &gt;&lt;?php echo $i;?&gt;&lt;/option&gt;
  &lt;?php }//end for page?&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery-gentleSelect.css :</p>
  
  <pre><code>.gentleselect-data { display: none; }
  
  .gentleselect-label {
      padding: 1px 20px 1px 20px;
      background-color: #eee;
  
      border: 2px solid #ddd;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;   
  
      background-repeat: no-repeat; 
      background-position: center right; 
  
      cursor: pointer;
      color: #555;
  }
  
  .gentleselect-label-highlight {
      border: 2px solid #aaa;
      background-image: url('img/expand.png');
  }
  
  .gentleselect-dialog {
      position: absolute;
      z-index: 500;
      display: none;
  
      background-color: #fff;
      border: 2px solid #999;
  
      -moz-box-shadow: 0px 0px 12px #555;
      -webkit-box-shadow: 0px 0px 12px #555;
      box-shadow: 0px 0px 12px #555;
  
      margin: 0; padding: 0;
  }
  
  .gentleselect-dialog &gt; ul { padding: 0; margin: 0; list-style: none; }
  .gentleselect-dialog &gt; ul &gt; li {
      margin: 0;
      padding: 3px 20px 3px 25px;
  
      cursor: pointer;
  }
  .gentleselect-dialog &gt; ul &gt; li.selected {
      font-weight: bold;
      color: #369;
      background-color: #eee;
  }
  .gentleselect-dialog &gt; ul &gt; li.gentleselect-dummy:hover { background-color: #fff; }
  .gentleselect-dialog &gt; ul &gt; li:hover {
      background-color: #69c;
      color: #fff;
  }
  
  .gentleselect-dialog &gt; .gentleselect-title {
      display: block;
      text-align: center;
      margin: 0;
      padding: 2px;
      background-color: #ddd;
      font-size: 0.8em;
      color: #666;
      overflow: hidden;
  }
  </code></pre>
  
  <p>jquery-gentleSelect.js :</p>
  
  <pre><code>(function($) {
  
  var defaults = {
      minWidth  : 100, // only applies if columns and itemWidth not set
      itemWidth : undefined,
      columns   : undefined,
      rows      : undefined,
      title     : undefined,
      prompt    : "Make A Selection",
      maxDisplay: 0,  // set to 0 for unlimited
      openSpeed       : 400,
      closeSpeed      : 400,
      openEffect      : "slide",
      closeEffect     : "slide",
      hideOnMouseOut  : true
  }
  
  function defined(obj) {
      if (typeof obj == "undefined") { return false; }
      else { return true; }
  }
  
  function hasError(c, o) {
      if (defined(o.columns) &amp;&amp; defined(o.rows)) {
          $.error("gentleSelect: You cannot supply both 'rows' and 'columns'");
          return true;
      }
      if (defined(o.columns) &amp;&amp; !defined(o.itemWidth)) {
          $.error("gentleSelect: itemWidth must be supplied if 'columns' is specified");
          return true;
      }
      if (defined(o.rows) &amp;&amp; !defined(o.itemWidth)) {
          $.error("gentleSelect: itemWidth must be supplied if 'rows' is specified");
          return true;
      }
      if (!defined(o.openSpeed) || typeof o.openSpeed != "number" &amp;&amp; 
              (typeof o.openSpeed == "string" &amp;&amp; (o.openSpeed != "slow" &amp;&amp; o.openSpeed != "fast"))) { 
          $.error("gentleSelect: openSpeed must be an integer or \"slow\" or \"fast\"");
          return true;
      }
      if (!defined(o.closeSpeed) || typeof o.closeSpeed != "number" &amp;&amp; 
              (typeof o.closeSpeed == "string" &amp;&amp; (o.closeSpeed != "slow" &amp;&amp; o.closeSpeed != "fast"))) { 
          $.error("gentleSelect: closeSpeed must be an integer or \"slow\" or \"fast\"");
          return true;
      }
      if (!defined(o.openEffect) || (o.openEffect != "fade" &amp;&amp; o.openEffect != "slide")) {
          $.error("gentleSelect: openEffect must be either 'fade' or 'slide'!");
          return true;
      }
      if (!defined(o.closeEffect)|| (o.closeEffect != "fade" &amp;&amp; o.closeEffect != "slide")) {
          $.error("gentleSelect: closeEffect must be either 'fade' or 'slide'!");
          return true;
      }
      if (!defined(o.hideOnMouseOut) || (typeof o.hideOnMouseOut != "boolean")) {
          $.error("gentleSelect: hideOnMouseOut must be supplied and either \"true\" or \"false\"!");
          return true;
      }
      return false;
  }
  
  function optionOverrides(c, o) {
      if (c.attr("multiple")) {
          o.hideOnMouseOut = true; // must be true or dialog will never hide
      }
  }
  
  function getSelectedAsText(elemList, opts) { 
      // If no items selected, return prompt
      if (elemList.length &lt; 1) { return opts.prompt; }
  
      // Truncate if exceed maxDisplay
      if (opts.maxDisplay != 0 &amp;&amp; elemList.length &gt; opts.maxDisplay) {
          var arr = elemList.slice(0, opts.maxDisplay).map(function(){return $(this).text();});
          arr.push("...");
      } else {
          var arr = elemList.map(function(){return $(this).text();});
      }
      return arr.get().join(", ");
  }
  
  var methods = {
      init : function(options) {
          var o = $.extend({}, defaults, options);
  
          if (hasError(this, o)) { return this; }; // check for errors
          optionOverrides(this, o); // 
          this.hide(); // hide original select box
  
          // initialise &lt;span&gt; to replace select box
          label_text = getSelectedAsText(this.find(":selected"), o);
          var label = $("&lt;span class='gentleselect-label'&gt;" + label_text + "&lt;/span&gt;")
              .insertBefore(this)
              .bind("mouseenter.gentleselect", event_handlers.labelHoverIn)
              .bind("mouseleave.gentleselect", event_handlers.labelHoverOut)
              .bind("click.gentleselect", event_handlers.labelClick)
              .data("root", this);
          this.data("label", label)
              .data("options", o);
  
          // generate list of options
          var ul = $("&lt;ul&gt;&lt;/ul&gt;");
          this.find("option").each(function() { 
              var li = $("&lt;li&gt;" + $(this).text() + "&lt;/li&gt;")
                  .data("value", $(this).attr("value"))
                  .data("name", $(this).text())
                  .appendTo(ul);
              if ($(this).attr("selected")) { li.addClass("selected"); } 
          });
  
          // build dialog box
          var dialog = $("&lt;div class='gentleselect-dialog'&gt;&lt;/div&gt;")
              .append(ul)
              .insertAfter(label)
              .bind("click.gentleselect", event_handlers.dialogClick)
              .bind("mouseleave.gentleselect", event_handlers.dialogHoverOut)
              .data("label", label)
              .data("root", this);
          this.data("dialog", dialog);
  
          // if to be displayed in columns
          if (defined(o.columns) || defined(o.rows)) {
  
              // Update CSS
              ul.css("float", "left")
                  .find("li").width(o.itemWidth).css("float","left");
  
              var f = ul.find("li:first");
              var actualWidth = o.itemWidth 
                  + parseInt(f.css("padding-left")) 
                  + parseInt(f.css("padding-right"));
              var elemCount = ul.find("li").length;
              if (defined(o.columns)) {
                  var cols = parseInt(o.columns);
                  var rows = Math.ceil(elemCount / cols);
              } else {
                  var rows = parseInt(o.rows);
                  var cols = Math.ceil(elemCount / rows);
              }
              dialog.width(actualWidth * cols);
  
              // add padding
              for (var i = 0; i &lt; (rows * cols) - elemCount; i++) {
                  $("&lt;li style='float:left' class='gentleselect-dummy'&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;").appendTo(ul);
              }
  
              // reorder elements
              var ptr = [];
              var idx = 0;
              ul.find("li").each(function() {
                  if (idx &lt; rows) { 
                      ptr[idx] = $(this); 
                  } else {
                      var p = idx % rows;
                      $(this).insertAfter(ptr[p]);
                      ptr[p] = $(this);
                  }
                  idx++;
              });
          } else if (typeof o.minWidth == "number") {
              dialog.css("min-width", o.minWidth);
          }
  
          if (defined(o.title)) {
              $("&lt;div class='gentleselect-title'&gt;" + o.title + "&lt;/div&gt;").prependTo(dialog);
          }
  
          // ESC key should hide all dialog boxes
          $(document).bind("keyup.gentleselect", event_handlers.keyUp);
  
          return this;
      },
  
      // if select box was updated externally, we need to bring everything
      // else up to speed.
      update : function() {
          var opts = this.data("options");
  
          // Update li with selected data
          var v = (this.attr("multiple")) ? this.val() : [this.val()];
          $("li", this.data("dialog")).each(function() {
              var $li = $(this);
              var isSelected = ($.inArray($li.data("value"), v) != -1);
              $li.toggleClass("selected", isSelected);
          });
  
          // Update label
          var label = getSelectedAsText(this.find(":selected"), opts);
          this.data("label").text(label);
  
          return this;
      }
  };
  
  var event_handlers = {
  
      labelHoverIn : function() { 
          $(this).addClass('gentleselect-label-highlight'); 
      },
  
      labelHoverOut : function() { 
          $(this).removeClass('gentleselect-label-highlight'); 
      },
  
      labelClick : function() {
          var $this = $(this);
          var pos = $this.position();
          var root = $this.data("root");
          var opts = root.data("options");
          var dialog = root.data("dialog")
              .css("top", pos.top + $this.height())
              .css("left", pos.left + 1);
          if (opts.openEffect == "fade") {
              dialog.fadeIn(opts.openSpeed);
          } else {
              dialog.slideDown(opts.openSpeed);
          }
      },
  
      dialogHoverOut : function() {
          var $this = $(this);
          if ($this.data("root").data("options").hideOnMouseOut) {
              $this.hide();
          }
      },
  
      dialogClick : function(e) {
          var clicked = $(e.target);
          var $this = $(this);
          var root = $this.data("root");
          var opts = root.data("options");
          if (!root.attr("multiple")) {
              if (opts.closeEffect == "fade") {
                  $this.fadeOut(opts.closeSpeed);
              } else {
                  $this.slideUp(opts.closeSpeed);
              }
          }
  
          if (clicked.is("li") &amp;&amp; !clicked.hasClass("gentleselect-dummy")) {
              var value = clicked.data("value");
              var name = clicked.data("name");
              var label = $this.data("label")
  
              if ($this.data("root").attr("multiple")) {
                  clicked.toggleClass("selected");
                  var s = $this.find("li.selected");
                  label.text(getSelectedAsText(s, opts));
                  var v = s.map(function(){ return $(this).data("value"); });
                  // update actual selectbox and trigger change event
                  root.val(v.get()).trigger("change");
              } else {
                  $this.find("li.selected").removeClass("selected");
                  clicked.addClass("selected");
                  label.text(clicked.data("name"));
                  // update actual selectbox and trigger change event
                  root.val(value).trigger("change");
              }
          }
      },
  
      keyUp : function(e) {
          if (e.keyCode == 27 ) { // ESC
              $(".gentleselect-dialog").hide();
          }
      }
  };
  
  $.fn.gentleSelect = function(method) {
      if (methods[method]) {
          return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
      } else if (typeof method === 'object' || ! method) {
          return methods.init.apply(this, arguments);
      } else {
          $.error( 'Method ' +  method + ' does not exist on jQuery.gentleSelect' );
      }   
  };
  
  
  })(jQuery);
  </code></pre>