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):
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?
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