Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    align text in middle with image not working correctly

    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
    Attached Images Attached Images     

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Have you tried: text-align: center;

    ?
    .
    .

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by finstah1 View Post
    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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •