Ok, so I have a set of divs that I would like to be stacked one on top of another nested inside of another div. I would like these two stacked inner divs to be vertically centered in the parent div, but for the life of me I cannot get them to center. Here is my code:
HTML

Input 1:
Input 2:

Option A Option B Option C Option D Option E Option F Option G
CSS

#wrapper { margin: 25px auto; width: 50%; text-align: center; background-color: lightblue;}#inner { display: inline-block; width: 300px; height: 100px; text-align: right; vertical-align: middle; background-color: yellow;}.center { padding: 2.5px 5px; display: block; background-color: green; vertical-align: middle;}#select { display: inline-block; background-color: red; vertical-align:middle;}And here is a running example:jsFiddle
I would like to get the two "Center" class divs (the green fields in the jsfiddle) centered vertically inside of the "inner" div (yellow in the example). I have tried everything that I can think of and everything that I could find. I have even tried putting everything inside of one div and making that div display: table-cell; here but then the elements aren't centered horizontally.
So better said, I would like all three elements (the two inputs and the select) both horizontally and vertically centered on the page. How can I do this? Any help would be greatly appreciated! Thank you!


Check Solution