align text in middle with image not working correctly

finstah1 · 08-06-2007, 09:13 PM

I'm almost there but my text is wrapping below the images:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<style type="text/css">

.tabs {list-style:none; padding:15px 0; margin:4px 0; width:190px;}
.tabs li {display:block; margin:4px 0; border: 1px solid black;}
.tabs img { vertical-align: middle; }
.tabs li a {display:block; width:190px; height:76px; font:normal 12px verdanan; text-decoration:none; color:#000;}
.tabs li a:hover {color:#050;}
.tabs li a.selected, .tabs li a.selected:hover {color:#000; border-color:#fff;cursor:default;}






</style>
</head>
<body>
<ul class="tabs">
<li><a href="#"><img src="images/sas.jpg" alt="Student Account Services" /> Student<br />Account <br />Services</a></li>
<li><a href="#"><img src="images/procurement.jpg" alt="Procurement Services" /> Procurement<br />Services</a></li>
<li><a href="#"><img src="images/realestate.jpg" alt="Real Estate" /> Real<br />Estate</a></li>
<li><a href="#"><img src="images/riskmgmt.jpg" alt="Risk Management" /> Risk<br />Management</a></li>
</ul>
</body>
</html>

Does anyone know how to get the text to align in the middle vertically without it falling underneath the image?

Note: images are attached. Thanks for any help

Jutlander · 08-06-2007, 09:20 PM

Have you tried: text-align: center;

?

Arbitrator · 08-07-2007, 06:20 AM

Quote:

Originally Posted by finstah1

Does anyone know how to get the text to align in the middle vertically without it falling underneath the image?

CSS tables can be used for vertical centering of multiple lines of text. It’s too bad that Internet Explorer doesn’t support them. Still, you can coax Internet Explorer into vertically centering text if you know the font size, line height, and height of the container element.

Below is an example that demonstrates both methods; Internet Explorer has been fed the less dynamic code via a conditional comment. I’ve also made several other corrections.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn">
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Demo CF120731</title>
		<meta name="Author" content="Patrick Garies">
		<meta name="Created" content="2007-08-06">
		<meta name="Revised" content="2007-08-07">
		<style type="text/css">
			* { margin: 0; padding: 0; }
			html { background: white; color: black; font: 12px/1.2 sans-serif; }
			#navigation { width: 190px; margin: 1em; }
			#navigation li { display: table; width: 100%; margin: 0.333em 0; border: 1px solid; border-collapse: collapse; }
			#navigation a { display: table-cell; height: 66px; padding: 0 0 0 100px; background-repeat: no-repeat; color:#000; vertical-align: middle; text-decoration: none; }
			#navigation a:hover { background-color: #ffe; color: #050; }
			#student-account-services a { background-image: url("sas.jpg"); }
			#procurement-services a { background-image: url("procurement.jpg"); }
			#real-estate a { background-image: url("realestate.jpg"); }
			#risk-management a { background-image: url("riskmgmt.jpg"); }
			#navigation span { display: block; }
		</style>
		<!--[if IE]>
			<style type="text/css">
				#navigation li, #navigation a { display: block; }
				#student-account-services a { height: 54.6px; padding-top: 11.4px; }
				#procurement-services a, #real-estate a, #risk-management a { height: 47.4px; padding-top: 18.6px; }
			</style>
		<![endif]-->

	</head>
	<body>

		<ul id="navigation">
			<li id="student-account-services">
				<a href="/"><span>Student</span> <span>Account</span> <span>Services</span></a>
			</li>
			<li id="procurement-services">
				<a href="/"><span>Procurement</span> <span>Services</span></a>
			</li>
			<li id="real-estate">
				<a href="/"><span>Real</span> <span>Estate</span></a>
			</li>
			<li id="risk-management">
				<a href="/"><span>Risk</span> <span>Management</span></a>
			</li>
		</ul>

	</body>
</html>

finstah1 · 08-07-2007, 02:22 PM

thanks Arbi, I was able to take what you posted and tweak it a bit to get it work how I wanted. Also, thanks for the heads up with vertical alignment and css tables. Now I know where to go when this issue comes up again. Learn something new everyday.