[RESOLVED] html\css vertical alignment of a div tag not working

**chris1990** · Dec 10th, 2010, 03:58 PM

I'm unable to make the menu text align in the middle of the 'fixedmenu' divtag, i dont understand why.

index.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Car 2000</title>

<link href="css/layouts.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center" id="fixedbody">
<div align="center" id="fixedheader">
<img src="images/logo_h.gif" alt="Car 2000" width="270" height="160" /><img src="images/right_h.gif" alt="Car 2000" width="630" height="160" />
</div>
<div class="menutext" id="fixedmenu">
HOME : ABOUT : SERVICES : CONTACT : BOOK NOW</div>
</div>
</body>
</html>

styles.css

Code:

.menutext {
	font-family:Tahoma, "Courier New", Consolas, "Colonna MT";
	font-size:30px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

layouts.css

Code:

#fixedbody {
	height: 900px;
	width: 900px;
	overflow: hidden;
	margin:auto;
}

#fixedheader {
	height: 160px;
	width: 900px;
	overflow: hidden;
}

#fixedmenu {
	height: 64px;
	width: 900px;
	overflow: hidden;
	background-image: url(../images/menubar_900.gif);
}

**SambaNeko** · Dec 10th, 2010, 04:26 PM

Vertical-align doesn't always work like you'd expect it to work. Please do read this page for more info, but what you'll need to do is add "line-height: 64px;" to your #fixedmenu declaration. You can remove "vertical-align: middle;" from .menutext, because it is not doing anything for you.

**chris1990** · Dec 10th, 2010, 07:18 PM

Thanks for the help much appreciated, though i already came up with a workaround, thought i'd post my solution incase anyone else needs it.

changes to index.html

HTML Code:

<div id="fixedmenu">
<div id="fixedmenutext">
  <span class="main_nav_links"><a href="index.html">HOME</a> : <a href="about.html">ABOUT</a> :<a href="services.html"> SERVICES</a> : <a href="contact.html">CONTACT</a> : <a href="book.html">BOOK NOW</a></span></div>
</div>

changes to layout.css

Code:

#fixedmenutext {
	height: 50px;
	width: 800px;
	overflow: hidden;
	vertical-align: middle;
	margin: auto;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

changes to styles.css

Code:

.main_nav_links {
	font-family: Tahoma;
	font-size: 30px;
	font-style: normal;
	font-weight: bold;
	text-transform: capitalize;
	color: #000000;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin-top: 5px;
	margin-bottom: 5px;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
.main_nav_links A:link {
	text-decoration: none;
	color: #000000;
}
.main_nav_links A:visited {
	text-decoration: none;
	color: #000000;
}
.main_nav_links A:active {
	text-decoration: none;
	color: #003366;
}
.main_nav_links A:hover {
	text-decoration: none;
	color: #FFFFFF;
}

**SambaNeko** · Dec 10th, 2010, 07:27 PM

It's your choice, but I would not recommend your solution. You've gone from using a single div, to using two divs and a span; you should never use more DOM elements (and CSS properties) than are necessary because it makes messier, harder-to-maintain code. It also inflates the file size of the page, which makes the page take longer to load, and can negatively impact your SEO. You may not be interested in these aspects at the moment, but FYI for future development I guess.

Thread: [RESOLVED] html\css vertical alignment of a div tag not working

Thread Tools

Display

[RESOLVED] html\css vertical alignment of a div tag not working

Re: html\css vertical alignment of a div tag not working

Re: html\css vertical alignment of a div tag not working

Re: html\css vertical alignment of a div tag not working

Tags for this Thread

Posting Permissions