Advertisement
TstomixHD
-
Posts
2 -
Joined
-
Last visited
TstomixHD's Achievements
-
Centering a Div tag for more than one sized screen?
TstomixHD replied to TstomixHD's topic in Website and Graphics Design
I have to say that this is the best solution. Terribly sorry for the unruly reply. I 100% had forgotten I had posted this topic. I've become much more acustomed to HTML/CSS now! This will help me when I make my sites 'Hub Page' for our minecraft servers. Thanks again! I tried this as well, it sadly did not work. It didn't do anything in terms of vertically, just horizontally. Here is my code if anywhere is curious to what I'm using. <style> html { font-family: "Century Gothic",Verdana,sans-serif; padding: 0; margin: 0; } body { background: url(background.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .contentWrapper { margin: auto; width: 100%; height: 100%; padding: 0; } .contentHolder { width: 600px; height: 200px; position: absolute; color: #FAFAFA; text-shadow: 1px 1px 0 #111; background-color: transparent; left: 50%; top: 50%; margin: -100px 0 0 -300px; } .contentText { text-align: center; line-height: 95px; font-size: 55px; } </style> <body> <div class="contentWrapper"> <div class="contentHolder"> <p class="contentText">TextHere</p> </div> </div> </body> -
I'm not sure if this is possible, but it may be. What I wnt to do is center a div tag vertically; I have the div tag centered horizontally, but I can't figure out how I can vertically center it. I want the method to work on multiple screen, like 19:6 and 5:4 resolutions fro example, they should be perfectly centered. Sorry if I'm repeating myself, but here is some code so you can get an idea of what I have. Also, I don't want it to scale with the window size, I want it to be a fixed size.. any help on that? Thanks! <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Test Document</title> <style> .wrapper { width: 50%; // display: inline-block; position: relative; margin-left: auto; margin-right: auto; } div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; align:center; background-color:#666666; padding-left: 30px; padding-right: 30px; padding: 20px 20px; } </style> </head> <body> <div class="wrapper" align="center"> <p>Click the button to calculate the square of your first number, and the halves of your second number.</p> </div> </body> </html> P.S. Is it weird I carry my flash-drive around with me in my pocket? Some stuff is weird, and I most likely don't need some of it, this is a highly non revised test version .