asked on

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?

Peter Chan

ASKER

Here is the attached file
t761.png

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Chan

ASKER

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?

Dave Baldwin

That's an entirely different question. Look into @media queries and 'responsive web design'.

Peter Chan

ASKER

I think it is still related to original question, as I do expect to center the "whole" body under different resolution.

Dave Baldwin

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.

Peter Chan

ASKER

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

Peter Chan

ASKER

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?

Dave Baldwin

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.

Dave Baldwin

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.

Peter Chan

ASKER

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
...

Dave Baldwin

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.

Peter Chan

ASKER

Thanks.
Can I have more details of "responsive design"? And I can have one more thread for this.

Dave Baldwin

Here's the Wikipedia page on the subject: http://en.wikipedia.org/wiki/Responsive_web_design Open a new question to get more info.