Solved

Center the body/form on 1920x1080 screen/browser

Posted on 2014-07-18
14
231 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
  • 7
  • 7
14 Comments
 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
Here is the attached file
t761.png
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 220 total points
Comment Utility
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 10

Author Comment

by:HuaMinChen
Comment Utility
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
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
That's an entirely different question.  Look into @media queries and 'responsive web design'.
0
 
LVL 10

Author Comment

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

Expert Comment

by:Dave Baldwin
Comment Utility
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 10

Author Comment

by:HuaMinChen
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 10

Author Comment

by:HuaMinChen
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 10

Author Comment

by:HuaMinChen
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 10

Author Comment

by:HuaMinChen
Comment Utility
Thanks.
Can I have more details of "responsive design"? And I can have one more thread for this.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now