On 4/5/12 4:37 PM, Christopher Akins wrote:
On 4/5/12, AJ Putnam<photom...@ajputnam.com> wrote:
I have a couple of small images that I am trying to make sure are
vertically centered in a nav bar and I just can't
get my head around how to do it.
Sample page:
http://riverviewchamberplayers.com/about/index-12.htm
And CSS at
http://riverviewchamberplayers.com/style2010.css
In the first link, the rainbow flag and FB icon need to be vertically
centered. Have tried adding an attribute just to each image,
and a subclass but am striking out. Have tried valign=middle as well as
padding-top and margin-top but the latter two only
create too much space beneath the nav bar, throwing the background graphics
out of alignment.
If you look at other pages, you can see the FB icon is hovering just below
centered.
What (probably stupidly obvious) thing am I missing?
Thanks in advance...
Amy
Rather than adding top margin to the images, try a negative value on a
bottom margin. I tried the following on the FB icon within Firefox's
"edit HTML" feature of the web developer extension:
style="margin-bottom:-5px;"
It centered the image, vertically, pretty well. As each icon is
different, you might have to do each separately, rather than create
one class for both.
FWIW - This seems to do it this end:
.navstrip img { vertical-align: middle; }
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
