Johnny2 0 Report post Posted January 13, 2013 I'm trying to center text inside it's parent container. It seems like it should be super easy, but it's been kicking my butt for like 4 hours. What am I missing? I thought "vertical-align: middle" was what I needed, but it's not working. Please.... can someone please help me? Here is the html/css code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>kicking my butt!</title> <style> * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; line-height: 1.5em; text-decoration: none;} header { background-color:#C00;} .header-middle h1 { height: 400px; vertical-align:middle; text-align: center; font-size: 36px; font-family: Verdana, Geneva, sans-serif; color: #0F0; background-color: #000; overflow: hidden;} </style> </head> <body> <header> <div class="header-middle"> <h1>Text to be centered vertically within the black box, but don't know how...</h1> </div><!--end of header-middle div--> </header> </body> </html> Quote Share this post Link to post Share on other sites
PicnicTutorials 4 Report post Posted January 13, 2013 (edited) If its just one line then just give it line height to match that of its container. If its multiple lines or an unknown height you can do it like this http://www.visibilityinherit.com/code/css-vertically-center-unknown-height.php Edited January 13, 2013 by Eric Quote Share this post Link to post Share on other sites
grabenair 4 Report post Posted January 15, 2013 I just wanted to add you probably should put the body tag in your zeroing out css. * body { code here } The reason is the body will put margin on automatically. Sometimes it will not matter and sometimes it will. Especially when doing a full width web site. You will have a little white space on the sides. Putting the body tag in takes care of this. Quote Share this post Link to post Share on other sites
Andrea 20 Report post Posted January 15, 2013 grabenair - using the * affects every single tag used - including the body tag. No need to call it out separately. Quote Share this post Link to post Share on other sites
grabenair 4 Report post Posted January 15, 2013 Oh sorry then. I was taught wrong. I was taught that the * is the short cut for html in css. Also I built a site that the header was full width and to make it go all the way in the browser window I had to put in the body tag with the *. This was a few years age. So maybe things changed. I also just went and looked at random sites all of them had * body in the css. Do not get me wrong I want to do things the right way and do not want to give the wrong advice. Quote Share this post Link to post Share on other sites
Andrea 20 Report post Posted January 15, 2013 * is a universal placeholder - like a wild card or a joker - it stands for everything, thus already covers the body tag and any other. Quote Share this post Link to post Share on other sites
Johnny2 0 Report post Posted January 16, 2013 (edited) Thank you very much Eric! This works sweet, and if I just replace the text with an image (and adjust the "wrap" div width to the same as the picture) it works great. One more question though... If I want to align that image vertically BUT to the RIGHT, what change do I make? It seems there is a default setting somewhere for horizontal centering that isn't being expressed, but I don't know where that would be to change from "center" to "right". Edited January 16, 2013 by Johnny2 Quote Share this post Link to post Share on other sites
Johnny2 0 Report post Posted January 18, 2013 If its just one line then just give it line height to match that of its container. If its multiple lines or an unknown height you can do it like this http://www.visibilityinherit.com/code/css-vertically-center-unknown-height.php Thank you very much Eric! This works sweet, and if I just replace the text with an image (and adjust the "wrap" div width to the same as the picture) it works great. One more question though... If I want to align that image vertically BUT to the RIGHT, what change do I make? It seems there is a default setting somewhere for horizontal centering that isn't being expressed, but I don't know where that would be to change from "center" to "right". Quote Share this post Link to post Share on other sites
PicnicTutorials 4 Report post Posted January 18, 2013 like this <!doctype html> <html> <head> <meta charset="utf-8"> <title>kicking my butt!</title> <style> * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; line-height: 1.5em; text-decoration: none;} header { height: 400px; text-align: center; background:#000; } .header-middle h1 { font-size: 16px; line-height:400px; font-family: Verdana, Geneva, sans-serif; color: #0F0; overflow:hidden; float:right; } </style> </head> <body> <header> <div class="header-middle"> <h1>Text to be centered vertically within the black box, but don't know how...</h1> </div><!--end of header-middle div--> </header> </body> </html> Quote Share this post Link to post Share on other sites
