homepage Welcome to WebmasterWorld Guest from 23.20.196.179
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
Vertical aligning
Fotiman




msg:3681848		 8:23 pm on Jun 23, 2008 (gmt 0)

It's been a while since I've done anything like this and I need some help. Here's my markup: 

<ul> 
  <li><a href="#"><img src="i.gif"></a></li> 
  <li><a href="#">Example</a></li> 
</ul>

Here's my CSS: 

ul { style: none; margin: 0; } 
li { display: inline; }

The problem I'm having is that I want the image in the first link and the text in the second link to both be vertically aligned on the "middle" of each. Like so: 


+- ul --------------------------------+ 
¦ +- li ------------+ +- li --------+ ¦ 
¦ ¦ +- a ---------+ ¦ ¦.............¦ ¦ 
¦ ¦ ¦ +- img ---+ ¦ ¦ ¦.............¦ ¦ 
¦ ¦ ¦ ¦,,,,,,,,,¦ ¦ ¦ ¦ +- a -----+ ¦ ¦ 
¦*¦*¦*¦,,,,,,,,,¦*¦*¦*¦*¦ Example ¦*¦*¦** (Middle) 
¦ ¦ ¦ ¦,,,,,,,,,¦ ¦ ¦ ¦ +---------+ ¦ ¦ 
¦ ¦ ¦ +---------+ ¦ ¦ ¦.............¦ ¦ 
¦ ¦ +-------------+ ¦ ¦.............¦ ¦ 
¦ +-----------------+ +-------------+ ¦ 
+-------------------------------------+

It looks, though, like the image sticks up out of the containing <a>'s line height. Does anyone know how to style this to achieve the layout above?
Thanks.

 

appi2




msg:3681915		 10:06 pm on Jun 23, 2008 (gmt 0)

Can only valign in a table so its either margin or padding. You will have to know the image size to get half the image height and center the text.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

ul { list-style: none; margin: 0; }
li {float:left;display:block;border:1px solid #333; }
/*li.textvalign {margin-top:124px;background:#ccc; }*/
/*OR MAYBE*/
li.textvalign {padding:124px 0;background:#ccc; }
</style>
</head>

<body>
<ul>
<li><a href="#"><img src="img.jpg" width="345" height="258"></a></li>
<li class="textvalign"><a href="#">Example</a></li>
</ul>

</body>
</html>

There is also display:table but thats not supported by the worlds favorite browser.

ps gold star for the example ;)

appi2




msg:3681947		 10:58 pm on Jun 23, 2008 (gmt 0)

Had another play bit bettererer, with added maths puzzles.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}

ul { list-style: none; margin: 0; }

li {float:left;overflow:hidden; padding:1px;}

a {
display:block;
border:10px solid green;
background:#ccc;
font-size:16px;
}
a.textvalign {
/*fullheight = (image height) + (border height) --> 280 + 10 = 290px */
/*padding-top = (fullheight/2) - fontsize --> 145 - 16 = 129 */
padding-top:129px;
/*height = image height - padding-top - (border height*2) ---> 280 - 129 - 20 = 151 */
height:151px;
}
img {border:0;}
</style>
</head>

<body>
<ul>
<li> <a href="#"><img src="graphics/190b.jpg" width="190" height="280" align="absmiddle"></a> </li>
<li><a class="textvalign" href="#">Example</a></li>
</ul>

</body>
</html>

In IE6 the example <li> will auto fill to the right of the window. Not a clue why.

*edit bad maffs corrected (possibly)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved