1 reply [Last post]
cranegamelia
Offline
newbie
Last seen: 9 years 39 weeks ago
Timezone: GMT-4
Joined: 2010-10-03
Posts: 3
Points: 5

I am trying to center my text in an image for a menu button and I can't seem to get it to work. I have the text centered left to right but not up and down. What would be the code to do this?

CSS:

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color: #333;
	background-repeat: repeat;
	font-size: 100%;
	color: #FFF;
	letter-spacing: 0.2em;
	vertical-align: center;
}
 
.center
{
margin:auto;
width:1024px;
}
 
 
#wrapper {
	background-color: #603;
	height: 629px;
	width: 1024px;
	vertical-align: center;
	horizontal-align: center;		
}
 
#wrapper #left {
	width: 17%;
	float: left;
	height: 629px;
	background-image: url(images/LeftBG.png);
}
 
#wrapper #left #logo {
	position:relative;
	top: 10px;
	left: 8px;
}
 
#wrapper #left #rollover {
	padding: 0 0 0;
	margin: 0;
	position:relative;
	top: 10px;
	text-align: center;
	font-size:20px;
	list-style-type: none;
	height: 29px;
	width: 160px;
}
 
.home {
	background-image: url(images/rollover-buttons.png);
	list-style-type: none;
 	background-repeat: no-repeat;
	height: 29px;
	width: 160px;
	display:block;
}
 
.home a{
	background-image: url(images/rollover-buttons.png);
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: 0 0px;;
	height: 29px;
	width: 160px;
	display:block;
}
 
.home a:hover{
	background-image: url(images/rollover-buttons.png);
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: 0 -29px;
	height: 29px;
	width: 160px;
	display:block;
}
 
.home a:active {
	background-image: url(images/rollover-buttons.png);
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: 0 -58px;
	height: 29px;
	width: 160px;
	display:block;
}
 
#wrapper #line {
	width: 18px;
	float: left;	
}
 
#wrapper #line #lineIn {
	height: 503px;
	background-color: #000;
}
 
#wrapper #BG {
	float: left;	
}
 
a:link {
	color:#369;
	text-decoration: none
}    /* unvisited link */
a:visited {
	color:#369;
	text-decoration: none
} /* visited link */
a:hover {
	color:#633;
	text-decoration: none
}   /* mouse over link */
a:active {
	color:#633;
	text-decoration: none
}  /* selected link */

HTML:

<!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" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Amelia G. Crane 3D Modeler and Graphic Artist</title>
</head>
 
<body>
 
    <div class="center">
	<div id="wrapper"> 
	<div id="left">
	<div id="logo"> <a href="index.html"><img src="images/LogoTopLeft.png" alt="logo" class="imgLink"></a>
	<div id="rollover">
			<div class="home"><a href="index.html">Home</a>
    </div>
    </div>
    </div>
    </div>    
	<div id="line">
	<div id="lineID"><img src="images/Line.png" />
	</div>
	</div>
 
	<div id="BG"><img src="images/redBG.png" />
	</div>
    </div>
    </div>
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Like this

.home, .home a {
background: url(images/rollover-buttons.png) no-repeat;
display:block;
height: 29px;
line-height:29px;
width: 160px;
}
 
.home a:hover{ background-position: 0 -29px; }
 

The above should replace:

.home {
	background-image: url(images/rollover-buttons.png);
	list-style-type: none;
 	background-repeat: no-repeat;
	height: 29px;
	width: 160px;
	display:block;
}
 
.home a{
	background-image: url(images/rollover-buttons.png);
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: 0 0px;;
	height: 29px;
	width: 160px;
	display:block;
}
 
.home a:hover{
	background-image: url(images/rollover-buttons.png);
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: 0 -29px;
	height: 29px;
	width: 160px;
	display:block;
}
 
.home a:active {
	background-image: url(images/rollover-buttons.png);
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: 0 -58px;
	height: 29px;
	width: 160px;
	display:block;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference