Question

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 with the other jquery ui buttons.

Some help would be appreciated

Answer 1

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.