Solved

Center the body/form on 1920x1080 screen/browser

Posted on 2014-07-18
14
282 Views
Last Modified: 2014-07-19
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?
0
Comment
Question by:HuaMinChen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
14 Comments
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40205963
Here is the attached file
t761.png
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 220 total points
ID: 40205971
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
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40205994
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40205997
That's an entirely different question.  Look into @media queries and 'responsive web design'.
0
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40206004
I think it is still related to original question, as I do expect to center the "whole" body under different resolution.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40206005
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
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40206008
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
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40206014
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40206015
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40206016
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
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40206021
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40206033
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
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40206711
Thanks.
Can I have more details of "responsive design"? And I can have one more thread for this.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40206792
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

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question