Page 1 of 1

Vertical Align [SOLVED - HURRAH!!]

Posted: Sun Aug 06, 2006 3:27 am
by s.dot
Hey guys,

I'm having some issues with my navigation. Works like I want in IE, but not in FF or Opera. I want to have the text vertically aligned in the center. Sounds simple right? :P

In IE:
Image

In FF & Opera
Image

Here's the CSS:

Code: Select all

.navDiv {
	
	/* Size Properties */
	width: 100%;
	height: 25px;
	
	/* Background Properties */
	background-color: #3399CC;
	
	/* Border Properties */
	border-bottom: solid 1px #333;
	
	/* Text Properties */
	vertical-align: middle;
	
}

.navDiv a:active, .navDiv a:visited, .navDiv a:link {
	
	/* Text Properties */
	font-family: verdana, arial, tahoma;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
	
}

.navDiv a:hover {
	
	/* Text Properties */
	font-family: verdana, arial, tahoma;
	font-size: 11px;
	font-weight: bold;
	color: #3399CC;
	text-decoration: none;
	text-transform: uppercase;
	
}

.navButton {
	
	/* Size Properties */
	height: 25px;
	width: 14.28%;
	
	/* Float */
	float: left;
	
	/* Text Align */
	text-align: center;
	
	/* Border Properties */
	border: none;
	
	/* Background Image */
	background-image: url('../images/black_dot.gif');
	background-position: top right;
	background-repeat: repeat-y;
	
}
And here's the HTML

Code: Select all

<div class="navDiv">
	<div class="navButton"><a href="index.php">Home</a></div>
	<div class="navButton"><a href="#">How It Works</a></div>
	<div class="navButton"><a href="#">Tips</a></div>
	<div class="navButton"><a href="#">Sites</a></div>
	<div class="navButton"><a href="#">Proof</a></div>
	<div class="navButton"><a href="#">FAQ</a></div>
	<div class="navButton"><a href="forum">Forums</a></div>
</div>
Seems like what I did should work. I set the vertical-align for navDiv to middle.

Posted: Sun Aug 06, 2006 4:44 am
by Benjamin
Use padding instead, and set the height to auto, vertical-align only aligns objects in the line they are on, not vertically in the parent element.

Posted: Sun Aug 06, 2006 5:30 am
by matthijs
Another 'trick' is to use line-height. So you set line-height the same as the height. Like:

Code: Select all

.nav a {
  font-size:12px;
  line-height:26px;
  height:26px;
  margin:0;
  padding:0;
}
One thing you need to remember though is that if text inside one of the nav elements is longer and wraps on new lines, it can get messy.

Posted: Sun Aug 06, 2006 5:37 am
by s.dot
Very nice, you guys are like... geniuses. Aha.

CSS is not my thing, but i'm learning slowly. :-D
Thanks a lot!

Posted: Wed May 02, 2007 4:32 pm
by Luke
I realize this is a really old thread, but I was wondering what astions means about "use padding instead" I have this same problem but the stuff I need vertically aligned in the middle spans several lines (or possibly only one). I have no way of knowing ahead of time. How should I go about aligning it? :(

Posted: Wed May 02, 2007 4:47 pm
by Luke
nevermind "margin: auto" worked