Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Centering my page

Started by AdvMutant, Oct 19 2010 07:08 AM

Please log in to reply

5 replies to this topic

#1
AdvMutant

Posted 19 October 2010 - 07:08 AM

Programming Expert

Members
438 posts

Hey folks. I'm using Dynamic HTML Editor 1.9, and it works very well. A great program. It's only downside is that I can't center a page, so I've done it manually with CSS. Here's what I've done -

I have added the following to index.css -

Quote

.centered {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 100%;
margin: auto;
background-color: white;
color: white;
}

And I have wrapped the following around the whole page's code -

Quote

But it doesn't seem to work. The page is kinda centered, but it only moved like a half of the way to the side. How do I fix it?

Thanks!

Posted Image
There is no problem that cannot be solved by the use of high explosives.

#2
DEViANT

Posted 19 October 2010 - 08:04 AM

Programming Expert

Members
358 posts

.style {
text-align: center;
}

:D You should rep+ me so that I can win :D

My Blog | Ask me!
Error : Satan did it

#3
AdvMutant

Posted 19 October 2010 - 08:57 AM

Programming Expert

Members
438 posts

Sorry, but I never programmed with CSS before. Do I need to write <div class="style">? If so, it doesn't work.

Posted Image
There is no problem that cannot be solved by the use of high explosives.

#4
DEViANT

Posted 19 October 2010 - 10:23 AM

Programming Expert

Members
358 posts

just add text-align: center; to your current css object

:D You should rep+ me so that I can win :D

My Blog | Ask me!
Error : Satan did it

#5
AdvMutant

Posted 19 October 2010 - 10:41 AM

Programming Expert

Members
438 posts

Ok, thanks.

Posted Image
There is no problem that cannot be solved by the use of high explosives.

#6
BlaineSch

Posted 19 October 2010 - 12:15 PM

Writes binary right handed and hex left handed

Members
2,448 posts

"Text-align:center" only works for inline objects such as text or pictures.

If you want to center the page you simply set the left and right margin to auto. This only works if you set a width on the element. This would be appropriate if you were trying to center the whole element or the div, not just the contents of a div.

Example1:

<html>
    <head>
        <title>Hello World</title>
        <style>
        .container {
            width: 800px;
            background: blue;
        }
        .container2 {
            width: 200px;
            text-align: center;
            background: red;
        }
        .centered {
            margin-left: auto;
            margin-right: auto; /*margin: 0 auto; would also work*/
        }
        </style>
    </head>
    <body>
        <div class="container centered">
            <div class="container2 centered">
                Totally Centered
            </div>
            Hello World!
        </div>
    </body>
</html>