Question

I’ve been trying to work this out all day long

I’ve got a script for some jQuery dropdowns for my form, but the text within the drop down is not centered vertically in the box. I’ve styled the normal text boxes with padding-bottom so that the text sits in the middle, but I simply cannot do the same with the jQuery boxes. I have managed to do it on the actual dropdown, just not the option you see selected. If anyone could help get the text centered vertically in the box (not text align center) I will appreciate it.

http://fifamatchgenerator.com/dev/formtest/form1.php

I think I have been staring at it for too long and become blind to it…

p.s. there might be some code in the dd.css file which is what I have tried and failed with (most of the code is the default code which came with the script)

Answer 1

Get rid of your bottom padding, add a height and a line-height:

.ddlabel {
    height: 49px;
    line-height: 41px;
    padding-bottom: 0;
}

The key component here is the line-height. This is how you can adjust the vertical position of the text. You can adjust it to your liking. Setting the height isn’t completely necessary, but it will keep the drop down part of the menu properly positioned (this could be solved in other ways). Using padding for this isn’t really a good idea – the padding-bottom can actually just be removed (I left it there as a reminder).