Vertically center jQuery UI slider beside buttons

Question

I have a jQuery UI slider and two buttons next to each other and I want to center the slider vertically beside the buttons.

I've created a fiddle that shows what I want to achieve: http://jsfiddle.net/cKv34/

#button1, #button2 {
    float: right;
}
#wrapper {
    overflow: hidden;
    display: block;
    padding: 10px;
}
#slider {
    float: left;
    width: 100%;
}

...

<button id="button1">Button1</button>
<button id="button2">Button2</button>
<span id="wrapper"><div id="slider"></div></span>

I'm almost there, but right now I use a fixed padding on the slider's wrapper span element, which bugs me.

Is there a way to achieve the centering without using constant values?

_{I'm open to any suggestions as I'm a CSS newbie (I've based my fiddle upon this answer).}

score 2 · Accepted Answer · answered Jan 10 '14 at 22:00

I've done it the decidedly un-clever way, by using jQuery to find the values you need after the page is loaded, then adjust CSS accordingly.

Here's a fiddle and here's the jQuery:

var btnHeight = $('#button1').height(),
    slideHeight = $('#slider').height(),
    buffer = ((btnHeight - slideHeight)/2);

$('#wrapper').height(btnHeight), // set span to button height
$('#slider').css({'margin-top':buffer}); // set margin accordingly

I tried several times to solve using just CSS, but I ran into the same problems you did, which I think stem from your HTML structure. It's difficult to align an element relative to another element if they're not contained within the same DOM element. So starting with your HTML structure, it's easier to align the #wrapper with the buttons than the #slider. I adjusted your #wrapper to be the height of your button, then bumped the #slider down using a little math.

You might have a little more luck if you put the wrapper around the entire set of elements, slider and buttons, instead of just the slider, if that doesn't break your layout. If the DOM structure can't give 2 elements a clear reference to each other, i.e. by being children of the same parent element, then you usually have to fall back on libraries like LESS or jQuery that let you compute and store values for later comparisons.

[EDIT]

I kept the left/right padding but removed the top/bottom from the slider, as the question was about vertical alignment.

The jQuery solution is totally fine. Aside from that having another `` or `
` around the slider and the two buttons isn't a problem for me, I just created the fiddle like this because I had to write a few characters less. :) — Kohányi Róbert, Jan 11 '14 at 06:36

score -1 · Answer 2 · answered Jan 10 '14 at 22:09

-1

the following css may help you

#button1, #button2 {
    float: right;
}
#wrapper {
    overflow: hidden;
    display: block;
   position:relative;
    top:13px;
}
#slider {
    float: left;
    width: 98%;
}

answered Jan 10 '14 at 22:09

Green Wizard

3,507
4
18
29

This didn't work as expected, because removing the padding from the `#wrapper` clips the slider thumb. Aside from that the `top: 13px` isn't any better than the fixed padding. – Kohányi Róbert Jan 11 '14 at 06:29

Vertically center jQuery UI slider beside buttons

2 Answers2