Hi guys, im having a real problem finding any code that can do what i want: I want to vertical aligning upto 3 lines of text in a box that stays the same size, but even if its just 1 line, it still remains vertically aligned: The same box can hold hold upto 3 lines of text that are always shown vertically. Can anyone help??? Thankyou
It's been a long time since I fooled with this. This is an example I whipped up about a year ago. The real meat, getting it to work in IE, was supplied by Ingo Chao from experiments by Bruno Fasino. If you have questions ((it's not exactly intuitive), I'll try to figure out what we were doing then. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="author" content="Gary Turner / Ingo Chao" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>menu v+h centering</title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; height: 100%; } ul { border: 1px solid black; list-style: none; margin: 25px auto; padding: 5px; width: 150px; } li { border: 1px solid red; /*for clarity*/ position: relative; display: table; height: 4em; width: 100%; } a { /* link box */ border: 1px solid blue; /*for clarity*/ position: relative; display: table-cell; vertical-align: middle; text-align: center; height: 100%; width: 100%; } a { background-color: #aaa; } a:hover { background-color: #ccc; } /* star html hacks read by IE-Mac and IE-Win<7 */ * html a { /* link box */ display: block; /*table-cell is not supported, and we need that width/height for the maxed clickable area */ } * html a span { /* contains the link text */ display: inline-block; /* these two inline-blocks sit side-by-side in one line */ vertical-align: middle; /* aligns with respect to the line box of b.openm */ } * html b.opnm { /* empty vertical opener extra element */ display: inline-block; /* these two inline-blocks sit side-by-side in one line */ vertical-align: middle; /* I don't understand why, but it is needed in IE6 */ height: 100%; /* opens the line-box to the current height of the link box */ width: 1px; /* IEMac needs a width for inline-block to exist */ margin-left: -1px; /* compensate for width, keep them in one line */ background: black; /*for clarity*/ } /*]]>*/ </style> </head> <body> <ul> <li><a href="#"><span>link1<br /> line 2 of link 1</span><b class="opnm"><!----></b></a></li> <li><a href="#"><span>link2</span><b class="opnm"><!----></b></a></li> <li><a href="#"><span>link3<br /> line2 and<br /> line 3 of link 3</span><b class="opnm"><!----></b></a></li> </ul> </body> </html> Code (markup): cheers, gary
gary!! thanks so much!!! that is amazing code. I dont know how you worked it out, but its sooo good. Cheers.
Give Bruno the credit for coming up with the totally non-intuitive hack and Ingo gets the credit for interpreting it to this usage. Mine was the easy part. I did the stuff for modern browsers. I had a clue for IE, but was only close; no cigar. cheers, gary
Hi again mate. I'm very new to css, and i've tried for about 5hrs, but i cannot get the code to work when i try and use it on my site The first part, the "body" changes my whole site, so i removed it. I changed all the divs like this: #cenBox ul { #cenBox li { I wasnt sure what to do with the html tags, i've never seen them before? so i did this: * html #cenBox a span { * html #cenBox b.opnm { Unfortuanatly, what i tried just dosnt seem to work The text is no longer centerd verically or horizontally. I'm trying to make the box 320 wide and 60 high. But im also trying to put it inside of a absolute div. Any help with this problem would be really appreciated. I have tried for ages to get it to work, but i just dont think i'll be able to do it without somones help Many thanks.
Show us what you have. I have no idea how having the body element could screw anything up, unless it is already fubared. Too, it sounds like you need to expand your knowledge base of html. Those are all common element tags in the example. cheers, gary
After another 2hrs of trying, i've finally got it working!!! Thanks again mate, you've been great in your support. Regards.