|
|
|
| Web Hosting |
![]() ![]() |
Center In Height |
Aug 30 2008, 07:47 PM
Post
#1
|
|
|
Premium Member Group: [HOSTED] Posts: 255 Joined: 17-July 08 From: Atlantis Member No.: 31,503 myCENTs:73.77 |
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. |
|
|
|
Aug 31 2008, 04:09 AM
Post
#2
|
|
|
Super Member Group: [HOSTED] Posts: 500 Joined: 5-November 06 Member No.: 17,016 myCENTs:79.88 |
QUOTE(khalilov @ Aug 31 2008, 03:47 AM) [snapback]127770[/snapback] 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. |
|
|
|
Aug 31 2008, 10:35 AM
Post
#3
|
|
|
Premium Member Group: [HOSTED] Posts: 255 Joined: 17-July 08 From: Atlantis Member No.: 31,503 myCENTs:73.77 |
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 |
|
|
|
Aug 31 2008, 11:39 AM
Post
#4
|
|
|
Way Out Of Control - You need a life :) Group: [HOSTED] Posts: 1,144 Joined: 2-August 05 From: Kapellen (Antwerp, Belgium) Member No.: 7,585 myCENTs:41.75 |
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 |
|
|
|
Aug 31 2008, 03:15 PM
Post
#5
|
|
|
Premium Member Group: [HOSTED] Posts: 255 Joined: 17-July 08 From: Atlantis Member No.: 31,503 myCENTs:73.77 |
I copy and pasted them, neither work
|
|
|
|
Sep 1 2008, 07:18 AM
Post
#6
|
|
|
the Q Group: [HOSTED] Posts: 1,207 Joined: 13-July 05 From: Lithuania, Vilnius Member No.: 7,059 myCENTs:93.57 |
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.
|
|
|
|
Sep 2 2008, 06:34 PM
Post
#7
|
|
|
Way Out Of Control - You need a life :) Group: [HOSTED] Posts: 1,144 Joined: 2-August 05 From: Kapellen (Antwerp, Belgium) Member No.: 7,585 myCENTs:41.75 |
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.
|
|
|
|
Sep 2 2008, 06:46 PM
Post
#8
|
|
|
Nenad Bozidarevic Group: [MODERATOR] Posts: 1,053 Joined: 7-November 05 From: Belgrade, Serbia Member No.: 9,500 myCENTs:36.94 |
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).
|
|
|
|
Sep 3 2008, 09:10 AM
Post
#9
|
|
|
Premium Member Group: [HOSTED] Posts: 255 Joined: 17-July 08 From: Atlantis Member No.: 31,503 myCENTs:73.77 |
the line-height will do ,thanks =)
|
|
|
|
![]() ![]() |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Similar Topics
| Topic Title | Replies | Topic Starter | Views | Last Action | |||
|---|---|---|---|---|---|---|---|
![]() |
8 | khalilov | 346 | 27th September 2008 - 10:02 AM Last post by: TavoxPeru |
|||
![]() |
5 | Flamez | 339 | 2nd September 2008 - 04:19 AM Last post by: FirefoxRocks |
|||
![]() |
7 | trinifawk | 2,775 | 7th August 2008 - 11:44 PM Last post by: Guest |
|||
![]() |
3 | snutz411 | 1,418 | 31st July 2008 - 03:55 AM Last post by: Guest |
|||
![]() |
1 | pspkid | 509 | 28th July 2008 - 03:00 AM Last post by: FirefoxRocks |
|||
![]() |
2 | dragoneye | 1,738 | 12th May 2008 - 07:40 AM Last post by: iGuest |
|||
![]() |
1 | dserban | 594 | 14th September 2007 - 09:16 PM Last post by: toby |
|||
![]() |
6 | mtnbluet | 746 | 28th June 2007 - 04:48 PM Last post by: xboxrulz |
|||
![]() |
8 | klas2c | 2,076 | 25th August 2006 - 09:36 PM Last post by: unimatrix |
|||
![]() |
2 | bridgebuilder | 869 | 24th April 2006 - 03:19 PM Last post by: Tailson |
|||
![]() |
2 | soleimanian | 1,334 | 18th August 2005 - 12:27 PM Last post by: neilski |
|||
![]() |
2 | suicide | 629 | 10th September 2004 - 07:24 PM Last post by: r3d |
|||
|
Expand / Collapse Navigation



Aug 30 2008, 07:47 PM





