Thread

Hey all

REALLY showing my coding age with this one! I’m working on a new site, and I want to get a navigation bar vertically aligned to center with a title image. I’ve attached a Photoshop image, tlpcss01.jpg, showing how I want it to look.

The relevant CSS (ignore the poor naming schemes…I’ve just been copy/pasting my other CSS and adding a character):

#titlewrapper {
 margin: auto;
 text-align: center;
 height:189px;
}
.float_left {
 float: left;
 padding-right: 20px;
}
.float_left2 {
 height:189px;
 float: right;
 position:relative;
 top:50%;
 vertical-align:middle;
 display:inline-block;
}

Here’s the page code in EE:

<div class="title wrapper">

<div class="float_left">
<a href="http://www.threadedleafproject.org/graphics/TLPlogo01.png">http://www.threadedleafproject.org/graphics/TLPlogo01.png</a>
</div>


<div class="float_left2">
<a href="http://{homepage}/index.php" class="newsbutton"></a><a href="http://{homepage}/index.php/pages/donate" class="donatebutton"></a>
</div>

</div>

If you look at tlpcss02.jpg, you see my problem: no matter what I’ve tried, I cannot get the navigation images to vertically align with the main graphic on the left. I thought that by placing everything inside my titlewrapper, the float_left2 would inherit the height of that parent, so then I could set the top to 50%. Ugh.

Anyway, I’m pulling my hair out trying to get this to work.

Any help would be MUCH appreciated!

Try using line-height ...eg

.float_left2 {
 height:189px;
 line-height: 189px;
 float: right;
 position:relative;
 display:inline-block;
 
}

That did it! THANKS!!!