On Tue, Apr 2, 2013 at 12:24 PM, J.C. Berry <jcharlesbe...@gmail.com> wrote:
> I have a problem. I have to vertically center (middle) my nav items. See > http://mindarc.com/capture2_(1).JPG > > This is my HTML snippet: > > <div id="secmidpagenav"> > <div id="block-menu-block-22" class="block block-menu-block > contextual-links-region"> > <div class="content"><!--menu--> > <div class="menu-block-wrapper menu-block-22 menu-name-main-menu > parent-mlid-2315 menu-level-1"> > <ul id="subnav"><li class="menu-mlid-2039"><a > href="/solutions/xifin-inet/web-services">Web Services</a></li><li > class="menu-mlid-2318"><a href="/solutions/xifin-inet/cloud">Business Is > Better in the Cloud</a></li></ul></div> > </div> > </div> > </div> > > And my CSS: > > div#secmidpagenavcontainer{width:100%;border:0;height:59px;clear:both;} > div#secmidpagenavcontainer > > div#secmidpagenavbkgdimg{position:absolute;width:1194px;margin-left:-597px;left:50%;padding-top:0;background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd.png') > no-repeat;height:59px;} > div#secmidpagenavcontainer > > div#secmidpagenav{position:absolute;width:1170px;margin-left:-594px;left:50%;height:59px;text-align:center;margin-top:1px;} > div#secmidpagenavcontainer div#secmidpagenav > > ul{/*margin-top:0;text-align:center;top:7px;*/margin-top:-3px;position:relative;display:inline-block;height:59px;vertical-align:middle;} > div#secmidpagenavcontainer div#secmidpagenav ul > li{list-style-type:none;margin:15px 0 0 > 0;display:inline;padding:0;vertical-align:top;height:20px;border-right:1px > solid #ebebeb;} > div#secmidpagenavcontainer div#secmidpagenav ul > li:last-child{list-style-type:none;display:inline;border:none;margin:15px 0 > 0 0;vertical-align:top;height:20px;} > div#secmidpagenavcontainer div#secmidpagenav ul li > a{float:none;display:block;vertical-align:middle;padding:10px 5px 10px > > 5px;margin-top:-13px;min-width:120px;max-width:160px;height:59px;overflow:visible;text-decoration:none;font-size:14px;color:#fff;font-weight:normal;} > div#secmidpagenavcontainer div#secmidpagenav ul li > > a.active{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png') > 0 0 repeat-x;font-weight:bold;} > /*div#secmidpagenavcontainer div#secmidpagenav ul > > li:hover{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png') > 0 0 repeat-x;}*/ > div#secmidpagenavcontainer div#secmidpagenav ul li > > a:hover{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png') > 0 0 repeat-x;} > > Any ideas? Thank you! > > Maybe: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #secmidpagenav{background: grey; padding:1em;} #subnav li{display: table-cell; width: 100px; vertical-align: middle; text-align: center;} </style> </head> <body> <div id="secmidpagenav"> <div id="block-menu-block-22" class="block block-menu-block contextual-links-region"> <div class="content"> <!--menu--> <div class="menu-block-wrapper menu-block-22 menu-name-main-menu parent-mlid-2315 menu-level-1"> <ul id="subnav"> <li class="menu-mlid-2039"><a href="/solutions/xifin-inet/web-services">Web Services</a></li> <li class="menu-mlid-2318"><a href="/solutions/xifin-inet/cloud">Business Is Better in the Cloud</a></li> </ul> </div> </div> </div> </div> </body> </html> -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ 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/
