title: Button icon horizontal alignment with iconAlign: "top"
body: <p>In ExtJS 4, I am attempting to create a vertically-oriented <code>ButtonGroup</code> with one button to start:</p>
  
  <pre><code>new Ext.ButtonGroup({
      columns: 1,
      region: "west",
      collapsible: false,
      defaults: {
        scale: "large",
        iconAlign: "top"
      },
      items: [{
        text: "Your Books",
        iconCls: "icon-books"
      } ]
    })
  </code></pre>
  
  <p>The CSS rule just specifies the background image:</p>
  
  <pre><code>.icon-books {
     background-image: url(/images/book_open.png) !important;
  }
  </code></pre>
  
  <p>However, the image is flush left, as is illustrated below:</p>
  
  <p><img src="https://i.stack.imgur.com/8UjYu.png" alt="enter image description here"></p>
  
  <p>I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected <code>iconAlign: "top"</code> to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.</p>
  
  <p>What config option or CSS rule am I missing?</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPDATE</strong>: <a href="http://misc.commonsware.com.s3.amazonaws.com/ExtJSButtonIssue.zip" rel="noreferrer">here is a sample project</a> demonstrating the issue.</p>