Center the body/form on 1920x1080 screen/browser

Hi,
Using these
<body style="align-content:center;">
...

Open in new window

I am not able to center the whole form on the Markup page, especially when the resolution is

1920x1080

within Windows.

Now the page is still aligned to the left, like the attached. why?
LVL 11
HuaMin ChenProblem resolverAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HuaMin ChenProblem resolverAuthor Commented:
Here is the attached file
t761.png
0
Dave BaldwinFixer of ProblemsCommented:
Because you have not centered the 'body' in it's parent element.  And there isn't any CSS like 'align-content'.  'text-align' is the nearest thing and that still wouldn't work because that would only align the content that is Inside the body.

The most common way to center a page is to use a div that contains all of the other content, usually called 'wrapper', that is set up like this:
#wrapper {width: 980px; margin-left: auto; margin-right: auto;}

Open in new window

Then your page 'body' starts like this:
<body>
<div id="wrapper">
....

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HuaMin ChenProblem resolverAuthor Commented:
Many thanks. I have these css for the Linkbutton

            .lb_sethome{
            color:#000!important;
            top: 30px;
            left: 1015px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
            }    
            .lb_reg{
            color:#000!important;
            top: 30px;
            left: 1075px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
            }    
            .lb_log{
            color:#000!important;
            top: 30px;
            left: 1130px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
            }    
            ...

Open in new window

how to adjust the above, due to the different resolution, within different computers?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Dave BaldwinFixer of ProblemsCommented:
That's an entirely different question.  Look into @media queries and 'responsive web design'.
0
HuaMin ChenProblem resolverAuthor Commented:
I think it is still related to original question, as I do expect to center the "whole" body under different resolution.
0
Dave BaldwinFixer of ProblemsCommented:
I don't think it is.  When you read up on @media queries and 'responsive web design', you may understand why.  Besides... you haven't even tried what I suggested yet.
0
HuaMin ChenProblem resolverAuthor Commented:
No, I did try what you suggested. Here are codes

    <style type="text/css">
            ...
            #wrapper {width: 980px; margin-left: auto; margin-right: auto;}
        </style> 
</head>
<body>
    <form id="main_form" runat="server">
    <div class="content" id="wrapper">
    ...

Open in new window

but the Link buttons are not located on the top right corner of the area which has been centered on the page. And also the words are not centered well on the whole page and these are the problems.
t762.png
0
HuaMin ChenProblem resolverAuthor Commented:
The words are these labels.
    <div id="Dv1" style="text-align:center">
    <asp:Label ID="Label1"
        Text="..."
        width="740px"
        Font-Names="Times New Roman" 
        Font-Size="32pt" 
        Font-Bold="true"
        ForeColor="white"
        runat="server" />
    <br /><br />
    <asp:Label ID="Label2"
        Text="..."
        width="740px"
        Font-Names="Times New Roman" 
        Font-Size="32pt" 
        Font-Bold="true"
        ForeColor="white"
        runat="server" />
        ...

Open in new window

how to center them within the whole page above?
0
Dave BaldwinFixer of ProblemsCommented:
That does look a little better.  Change "width: 980px;" to the largest element width in your page.  Also, anything that has "left: 1015px;" is offset that far from the left and won't be centered.  After you set the width you want, you will probably have a lot of adjustments to make.
0
Dave BaldwinFixer of ProblemsCommented:
As for the labels, I don't know what that means in ASP.NET.  I am pretty good with HTML but I don't use ASP.NET.  Can't help you there.
0
HuaMin ChenProblem resolverAuthor Commented:
Thanks.
The question is, how to ensure that the whole area will always be centered there within the whole browser, under different computer resolutions, like

1280x720
1920x1080
...
0
Dave BaldwinFixer of ProblemsCommented:
That really is a different question.  In what is called "responsive design", your CSS style sheet will have sections identified by '@media' statements that redefine all of your elements for each size you want to support.  It can get very complicated.

The first thing is to get it All working at one size.  Then you will be able to see how many things must be adjusted.
0
HuaMin ChenProblem resolverAuthor Commented:
Thanks.
Can I have more details of "responsive design"? And I can have one more thread for this.
0
Dave BaldwinFixer of ProblemsCommented:
Here's the Wikipedia page on the subject:  http://en.wikipedia.org/wiki/Responsive_web_design  Open a new question to get more info.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.