homepage Welcome to WebmasterWorld Guest from 54.211.80.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved