khalilov 0 Report post Posted August 30, 2008 I can make the text appear in the center of the box by 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. Share this post Link to post Share on other sites
faulty.lee 0 Report post Posted August 31, 2008 I can make the text appear in the center of the box by 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 usevertical-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. Share this post Link to post Share on other sites
khalilov 0 Report post Posted August 31, 2008 I'll try =) { 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 Share this post Link to post Share on other sites
wutske 0 Report post Posted August 31, 2008 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 <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 Xisto</div></body></html> 2) Manually align it vertically:<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 Xisto</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 Share this post Link to post Share on other sites
khalilov 0 Report post Posted August 31, 2008 I copy and pasted them, neither work Share this post Link to post Share on other sites
Quatrux 4 Report post Posted September 1, 2008 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. Share this post Link to post Share on other sites
wutske 0 Report post Posted September 2, 2008 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. Share this post Link to post Share on other sites
pyost 0 Report post Posted September 2, 2008 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). Share this post Link to post Share on other sites
khalilov 0 Report post Posted September 3, 2008 the line-height will do ,thanks =) Share this post Link to post Share on other sites
