html/css

by EnderWiggin • 25 Aug 2010, 17:52 • Journals
I'm trying to learn this shit.

How do I vertically align text in a simple div?
I found "vertical-align" but whatever value I add behind it, it's not working.

Any pro's out there that I could ask some questions every now and then?
Comments
21
▼
Viperius 25 Aug 2010, 18:55
http://www.w3schools.com/css/pr_pos_vertical-align.asp

http://www.w3schools.com/css/
▼
Mayni 25 Aug 2010, 18:57
What this guy said, that website is literally a godsend.
Parent
▼
EnderWiggin 25 Aug 2010, 19:01
I used that site to find all the properties, but for some reason I can't get it to work.

Here's what I got:
Quote<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>



<head>
<title>Paginatitel</title>
<link rel="stylesheet" type="text/css" href="home.css" />
</head>



<body>

<div id="header">
<h1>Paginatitel</h1>
</div>

<div id="menu">
</div>

</body>

</html>
Quote*
{
margin: 0px;
padding: 5px;
font-family: "Trebuchet_MS";
}

#header
{
position: absolute;
width: 1243px;
height: 100px;
background-image: url('headerbackground.jpg');
border-style: solid;
border-width: 3px;
border-color: #49200b;
text-align: center;
}

#menu
{
position: absolute;
top: 100px;
width: 150px;
height: 400px;
border-style: solid;
border-width: 3px;
border-color: #42900b;
text-align: left;
}

image: paginai
Parent
▼
Mayni 25 Aug 2010, 19:08
Thats doing exactly what you're telling it to :S
Parent
▼
EnderWiggin 25 Aug 2010, 19:08
Yep, but now I want the text to vertically align.
So what do I add and where?
Parent
▼
Mayni 25 Aug 2010, 19:09
What do you mean by vertically align? You've put the text in the center of your div.
Parent
▼
EnderWiggin 25 Aug 2010, 19:10
Yes, it's aligned in the center if you look at it horizontally. But now I want it to also be in the middle of the height of the div.
Parent
▼
Mayni 25 Aug 2010, 19:13
Can't you just move the div, using positioning?
Parent
▼
Burneddi 25 Aug 2010, 19:14
#Header h1 {
Margin: 50% 0 50% 0;
padding: 0;
}
??????

PS: Web developing is really easy as long as you have working internet :-)
EDIT: how about this (if the above doesn't work)
#Header h1 {
vertical-align: middle;
}
Parent
▼
Canniii 25 Aug 2010, 19:19
horizontal align ;) he needs something like :
U
R
T
E
X
T
Parent
▼
Burneddi 25 Aug 2010, 19:20
He wants the text to be horizontally in the middle of the element. If I recall I've always done it with margin 50% 0 50% 0 (which is identical to margin-top 50% and margin-bottom 50%) and padding 0.

I think vertical-align is for images only.
Parent
▼
Canniii 25 Aug 2010, 19:22
yep that's why there isn't any function to do it, he just need to "play" with some div/ul/li/em (im making like that for lil stuff)
Parent
▼
dEFiX 25 Aug 2010, 19:22
Yup, vertical-align is for images only.
Parent
▼
EnderWiggin 25 Aug 2010, 20:14
The first part is aligning the text in the middle of the page. Closest thing ive seen to what I want though.
Parent
▼
Burneddi 25 Aug 2010, 20:35
Well that's curious. I imagined margin worked within the parent element - apparently it does not.

http://www.student.oulu.fi/~laurirai/www/css/middle/ here is something on the topic

E: SCratch that, see what Defix below said. Now that I think about it, it should work - I haven't done web developing in ages but I recall being stumped with the same problem you are.
Parent
▼
EnderWiggin 25 Aug 2010, 21:00
Defix's fix is not working :(
Parent
▼
dEFiX 25 Aug 2010, 19:16
<p style="text-align:center;">Centered Text</div>

Edit: Oh you said vertically.

Give the div a fixed size like 16em, then add a line-height from 8em and put a <br> infront of the text

Quick'n'Dirty :D

No, seriously, this should do it:

margin-top:auto;
margin-bottom:auto;
▼
Canniii 25 Aug 2010, 19:17
no this is horizontal align
Parent
▼
Kimi 25 Aug 2010, 19:21
i think "position: absolute;" kills the align option
▼
Jonasty 25 Aug 2010, 19:30
you made me buy it for nothing cunt
Back to top