Page 1 of 1

vertical align issue

Posted: Sat Mar 15, 2008 1:22 pm
by alex.barylski

Code: Select all

<img src="assets/images/icons/dashboards/chart.png" width="16px" height="16px" alt="" /><strong>Detailed Statistics</strong>&nbsp;<select style="padding-top: 2px">    <option>March</option>    <option>April</option></select>
I cannot figure out how to each element to vertically align so it looks nice in IE... :banghead:

I have tried wrapping it in a DIV and setting vertical-align: middle, baseline, etc...

I have also tried setting the padding-top, top, etc of each element individually but the damn <strong> tag doesn't budge...

Ideas?

Re: vertical align issue

Posted: Sat Mar 15, 2008 3:28 pm
by Christopher
Try reset.css

Re: vertical align issue

Posted: Sun Mar 16, 2008 7:27 am
by matthijs
As arborint suggested first reset everything.

Then play a bit with margins (also negative margins to pull stuff up/down).

Re: vertical align issue

Posted: Mon Mar 17, 2008 10:33 am
by pickle
Vertical-align is, as far as I'm concerned, the bastard child of CSS. It's not very straightforward how to use. Vertical-align generally applies to an element itself, & is not necessarily inherited by it's children. Wrap what you've got in a div & give it a class or id. Then use this CSS:

Code: Select all

#yourDiv *{
vertical-align:middle;
}
Of course, change #yourDiv to whatever is necessary. That should vertically align everything.