Welcome Guest ( Log In | Register )




                Web Hosting

 
Reply to this topicNew Topic
Center In Height
khalilov
post Aug 30 2008, 07:47 PM
Post #1


Premium Member
Group Icon

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.
Go to the top of the page
 
+Quote Post
faulty.lee
post Aug 31 2008, 04:09 AM
Post #2


Super Member
Group Icon

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.
Go to the top of the page
 
+Quote Post
khalilov
post Aug 31 2008, 10:35 AM
Post #3


Premium Member
Group Icon

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
Go to the top of the page
 
+Quote Post
wutske
post Aug 31 2008, 11:39 AM
Post #4


Way Out Of Control - You need a life :)
Group Icon

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 rolleyes.gif
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 wink.gif
Go to the top of the page
 
+Quote Post
khalilov
post Aug 31 2008, 03:15 PM
Post #5


Premium Member
Group Icon

Group: [HOSTED]
Posts: 255
Joined: 17-July 08
From: Atlantis
Member No.: 31,503
myCENTs:73.77


I copy and pasted them, neither work tongue.gif
Go to the top of the page
 
+Quote Post
Quatrux
post Sep 1 2008, 07:18 AM
Post #6


the Q
Group Icon

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. biggrin.gif
Go to the top of the page
 
+Quote Post
wutske
post Sep 2 2008, 06:34 PM
Post #7


Way Out Of Control - You need a life :)
Group Icon

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.
Go to the top of the page
 
+Quote Post
pyost
post Sep 2 2008, 06:46 PM
Post #8


Nenad Bozidarevic
Group Icon

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).
Go to the top of the page
 
+Quote Post
khalilov
post Sep 3 2008, 09:10 AM
Post #9


Premium Member
Group Icon

Group: [HOSTED]
Posts: 255
Joined: 17-July 08
From: Atlantis
Member No.: 31,503
myCENTs:73.77


the line-height will do ,thanks =)
Go to the top of the page
 
+Quote Post

Reply to this topicNew Topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   8 khalilov 346 27th September 2008 - 10:02 AM
Last post by: TavoxPeru
No New Posts   5 Flamez 339 2nd September 2008 - 04:19 AM
Last post by: FirefoxRocks
No New Posts   7 trinifawk 2,775 7th August 2008 - 11:44 PM
Last post by: Guest
No New Posts   3 snutz411 1,418 31st July 2008 - 03:55 AM
Last post by: Guest
No New Posts   1 pspkid 509 28th July 2008 - 03:00 AM
Last post by: FirefoxRocks
No New Posts   2 dragoneye 1,738 12th May 2008 - 07:40 AM
Last post by: iGuest
No New Posts   1 dserban 594 14th September 2007 - 09:16 PM
Last post by: toby
No New Posts   6 mtnbluet 746 28th June 2007 - 04:48 PM
Last post by: xboxrulz
No New Posts   8 klas2c 2,076 25th August 2006 - 09:36 PM
Last post by: unimatrix
No New Posts   2 bridgebuilder 869 24th April 2006 - 03:19 PM
Last post by: Tailson
No New Posts   2 soleimanian 1,334 18th August 2005 - 12:27 PM
Last post by: neilski
No New Posts   2 suicide 629 10th September 2004 - 07:24 PM
Last post by: r3d