Need help with buttons alignment

I'm having some trouble aligning vertically a set of jquery-ui buttons and controls. They represent a set of options, like a button bar :

http://jsfiddle.net/DeYb8/

The desired result is to have all controls centered vertically. You can see in the example the autocomplete (input and button) are not aligned wit开发者_JS百科h the other jquery ui buttons.

Some help would be appreciated

If you don't mind taking away the floating css, you could achieve this with display:table-cell styling. For example:

.icBoxToolbarInner > * {
    display: table-cell;
}

See this in action: http://jsfiddle.net/william/DeYb8/1/.

In regards to learning positioning, I found the CSS Positioning from BrainJar does a very good job explaining different aspect of positioning. If that's not enough, you could try the Visual formatting model from the official W3 recommendation. Other than that, just make sure you understand different types of displays and box models.

A quick and dirty fix would be to change part of your CSS to:

.icBoxToolbarInner *{
                     height:  20px;
                     display: inline-block;
                     vertical-align: middle;
                    }

Note the asterisk (*) above, and your HTML "button1" style to:

style="width:20px; height:12px"