Jump to content
xisto Community
khalilov

Center In Height

Recommended Posts

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

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 use
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.

Share this post


Link to post
Share on other sites

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

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 :mellow:

<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 :D

Share this post


Link to post
Share on other sites

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. :mellow:

Share this post


Link to post
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.