| | I can make the text appear in the center of the box by CODE text-align:center But that only works in width i also want it to be centered in height, meaning the word appears exactly in the middle of the box. |
|
|
|
QUOTE(khalilov @ Aug 31 2008, 03:47 AM)  I can make the text appear in the center of the box by CODE text-align:center But that only works in width i also want it to be centered in height, meaning the word appears exactly in the middle of the box. You can use CODE vertical-align:middle You could have made your question clearer next time, as in explaining what do your mean by "box", it could have been a cell or textbox or textarea. And also if you're referring to HTML or CSS and so on. It's not hard to guess but it might have been confusing at times when it's ambiguous. This not only ease those who is trying to help answering your questions, but it also helps those who are asking the same question.
I'll try =)
CODE { position:absolute; top:460px; left:250px; width:100px; height:60px; vertical-align: middle; background:black; color:yellow; border:1px solid orange; text-align: center; } the verticalalign isn't having an effect O.o
okay, vertical-align is a style-element you should only use for inline elements, like in tables, for block elements like div it can't be used (unfortunately).
There are a few ways to fix this: 1) This won't work if the position of your div is set to absolute  CODE <html> <head> </head> <body> <style type="text/css"> div.outer { [b] display: table-cell; vertical-align: middle;[/b] width:100px; height:120px; background:black; color:yellow; border:1px solid orange; text-align: center; } </style> <div class="outer"> HELLO ASTAHOST </div> </body> </html> 2) Manually align it vertically: CODE <html> <head> </head> <body> <style type="text/css"> div.outer { position:absolute; top:460px; left:250px; width:100px; height:120px; background:black; color:yellow; border:1px solid orange; text-align: center; } [b]div.inner { position: absolute; top: 33%; <!-- you'll have to change this if you have more or less lines of text --> }[/b] </style> <div class="outer"> <div class="inner">HELLO ASTAHOST</div> </div> </body> </html> Okay, another way of vertically aligning stuff is using tables, but tables shouldn't be used to give a website structure. Hopes this helps a bit 
maybe you tried Internet Explorer, because as I know display: table-cell; normally works with Opera, maybe Firefox, but differently and etc. but with IE it doesn't really work as it has to, at least the last time I tried it.. If it really doesn't work, even though it should, you can always use the HTML even though a lot of whom could say it's outdated and etc. but most of companies and designers avoiding this things, just use a table tag, of course with tr and td or th and a valign="middle"; it always works as it has if you're using it the right way. I never liked the height parameter, it never validates, but sometimes it works.
yes indeed, if your website becomes more complex it's sometimes better to sometimes use tables because they are more easy and work almost exactly the same in every browser.
Usually when I want to align text vertically, it's only one line and inside a box of known height. If that is the case, you need to use line-height: 100px (if that's the height of your box, obviously).
the line-height will do ,thanks =)
|
|
 Center In Height |
