1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Vertical aligning

Discussion in 'CSS' started by JoeBert533, Jan 25, 2009.

0
  1. #1
    How do I vertically align the outer div in the viewport and the other elements vertical within themselves? Hope I made sense :(

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
*
{
	margin:0;
	padding:0;
}

div
{
	width:70%;
	margin:0 auto;
	height:20em;
	border:.4em solid black;
}
p
{
	border:.4em solid black;
	margin:0 auto;
	line-height:8em;
	display:inline;
	width:55%;
	height:8em;
}
span
{
	display:block;
	color:red;
	font-size:2em;
	width:60%;
	margin:0 auto;
	text-align:center;
}
</style>
</head>
<body>
<div>
	<p>
		<span>X</span>
	</p>
</div>
</body>
</html>
    Code (markup):

     
    JoeBert533, Jan 25, 2009 IP
  2. JoeBert533

    JoeBert533 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Anyone =/?

    New code up ther.
     
    JoeBert533, Jan 25, 2009 IP
  3. Tjobbe

    Tjobbe Peon

    Messages:
    45
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Just so I know what you want, do you have a jpeg mockup of the design you are trying to achieve? Maybe you can draw a few lines in paint or something so I can understand what you need doing?
     
    Tjobbe, Jan 26, 2009 IP
  4. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Vertical align will only work within tables and not in a div or anything else.
     
    gobbly2100, Jan 26, 2009 IP
  5. eric.r

    eric.r Peon

    Messages:
    124
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Its pretty obvious what he wants. He wants to know how to vertically align a div. Unfortunately, until css3 comes out there is no property/attribute that can vertically align a div. There are ways to do this of course but the best way can just be to google. Heres a link to get you started.

    (Real Page) http://stylizedweb.com/2008/02/01/vertical-align-div/
    (Demo) http://stylizedweb.com/examples/verticalaligndiv.html

    Note that you must scroll out by holding ctrl + the scroll wheel on your mouse. Zoom out and you will see that it is vertically aligned and horizontally aligned.

    ~eric
     
    eric.r, Jan 27, 2009 IP
  6. Tjobbe

    Tjobbe Peon

    Messages:
    45
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    With a mockup I may be able to suggest a way to achieve what you want, just a thought.
     
    Tjobbe, Jan 27, 2009 IP