Home>

* The content of the question has been changed.

Environment is
VS2017
ASP.NET WebForm
.NET Framework4.6.1
GrapeCity.Web.Input.v100

I'm making the following screen
Since the position of Style is created with absolute, it is always a fixed position.

⇒After a little investigation, there is something called relative
This proved that the correlation position can be specified.

1. I want to keep the screen in the center of the browser
⇒Change the position to relative
margin-right: auto;
margin-left: auto;
It was made in the center of the left and right, but the top and bottom remain fixed at the top.
Is there something like margin-right or margin-left when centering up and down?

2. Currently, I am writing solid settings such as text, label setting position, height, width etc.
In general installation, setting of the installation position, height, width, etc.
Is it something to set for each text and label in CSS?

Because I couldn't give you personal information or passwords when uploading the source
Change keywords such as password and PAssword to HOGE.
* Because the last source could not be uploaded by any means
I successfully uploaded it when I pasted it into the answer

Thanks for your cooperation.

* Screen when creating the position of Style in absolute

`

<% @ Master Language = "C #" AutoEventWireup = "true" CodeBehind = "SiteOther.master.cs" Inherits = "SiSyokuinKanriWeb.SiteOther"%>
<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <base target = "_ self" />
    <title><% = formtitle%></title>
    <link href = "~/Styles/Site.css" rel = "stylesheet" type = "text/css" />
    <!-Enter on the screen you do not want to return with the back button->
    <script type = "text/javascript">
        history.forward ();
    </script>
    <script src = "../../ script/Html5Viewer/jquery-1.10.2.js" type = "text/javascript"></script>
    <script>
        $(function () {
            // ------------------------
            // jQuery key control
            // cancel key by return value false
            // ------------------------
            $(document) .keydown (function (event) {
                // alert ("AAA");
                // code of key clicked
                var keyCode = event.keyCode;
                // the object for which the key event occurred
                var obj = event.target;
                // control the backspace key
                if (keyCode == 8) {
                    //alert(obj.tagName);
                    //alert(obj.type);
                    // Control text box/text area
                    if ((obj.tagName == "INPUT"&&(obj.type == "TEXT" || obj.type == "text"))
                        || obj.tagName == "TEXTAREA") {
                        // Do not control if you can enter
                        if (! obj.readOnly&&! obj.disabled) {
                            // alert ("OK");
                            return true;
                        }
                    }
                    return false;
                }
            });
        });
    </script>
    <script type = "text/javascript">
        window.document.onkeydown = function () {
            if (event.keyCode == 116) {
                alert ("F5 key has been pressed. Do not press the F5 button or the browser refresh button because they cause malfunctions. If a confirmation screen is displayed again, please return with the cancel button." );
                event.keyCode = 0;
                return false;
            }
        }
    </script>
    <asp: ContentPlaceHolder ID = "head" runat = "server">
    </asp: ContentPlaceHolder>
</head>
<body>
    <div><form runat = "server">
            <div>
                <asp: ContentPlaceHolder ID = "MainContent" runat = "server">


                </asp: ContentPlaceHolder>
            </div>
            <asp: Panel ID = "Panel2" runat = "server"
                >
                <asp: Label ID = "Label1" runat = "server"
                   
                    Font-Italic = "True" Font-Size = "11px" Font-Bold = "True" ForeColor = "White" Text = "CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"></asp: Label>
                <asp: Label ID = "Label2" runat = "server"
                   
                    Font-Italic = "True" Font-Size = "11px" Font-Bold = "True" ForeColor = "White"></asp: Label>
                <asp: Label ID = "Label4" runat = "server"
                    Font-Italic = "True" Font-Size = "9px"
                   
                    Text = "Copyright c xxxxxxxx Corporation All Rights Reserved." Font-Bold = "True" ForeColor = "Yellow"></asp: Label>
            </asp: Panel>
        </form>
    </div>
</body>
</html>
/* DEFAULTS
-------------------------------------------------- -------- * /
body {
   padding: 0 20px;
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
}
.fakeContainer {/ * The parent container * /
    border-style: none;
    border-color: inherit;
    border-width: medium;
    margin: 0 0 20px;
    width: 709px;/* Required to set * /
    height: 18px;/* Required to set * /
    overflow: hidden;/* Required to set * /
}
.spreadbtn
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 9px;
}
.btn
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;
}
.btn: hover {
    background-color: #fff;
    border-color: # 59b1eb;
    color: # 59b1eb;
}
.lbl
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;
}
.lblHead
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;
}
.rdo
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;
}
.chk
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;
}
.TXT
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;
}
.date
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;}
.cmb
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;
}
.lnk
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    font-size: 11px;
}
body {
    background: # F0F0F0;
    font-size: .80em;
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    color: # 000066;
}
a: link, a: visited
{
    color: # 034af3;
}
a: hover
{
    color: # 1d60ff;
    text-decoration: none;
}
/ * HEADINGS
-------------------------------------------------- -------- * /

/ * PRIMARY LAYOUT ELEMENTS
-------------------------------------------------- -------- * /
.center {
    border: 0px;
    text-align: center;
}
.page {
    position: static;
    height: 650px;
    width: 1050px;
    background-color: #fbfffe;
    border: 1px solid # 496077;
    margin-right: auto;
    margin-left: auto;
}
.header {
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #fbfffe;
    width: 99%;
    top: 0px;
    margin-right: auto;
    margin-left: auto;
    height: 114px;
}
.main {
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}
.footer
{
    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Go Pro W3", Meiryo, "Meiryo", "MS P Gothic", "MS P Gothic", sans-serif;
    color: # 4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
    height: auto! important;
}
.FpImage img
{
    height: 20px;
    width: 20px;
}
  • Answer # 1

      By setting it to

    , it was created in the center of the left and right, but the top and bottom remain fixed at the top.
      Is there something like margin-right or margin-left when centering up and down?

    I don't think "on the top and bottom" on a normal page, but what kind of scene is it?

    For example, when the user clicks the login button, do you want to pop up a dialog box with a text box for entering ID and password and a login button in the center of the screen?

    If so, we recommend using jQuery UI dialogs provided by Samurai, Bootstrap's Modal plugins, etc. rather than writing your own.

    Dialog
    http://jqueryui.com/dialog/

    Modals modal.js
    https://getbootstrap.com/docs/3.3/javascript/#modals

    If you have an ASP.NET Web Forms app, ModalPopup is an option.

    ModalPopup Demonstration
    https://ajaxcontroltoolkit.devexpress.com/ModalPopup/ModalPopup.aspx

    [Added]

    In my comment on 08/27/2018 14:46 below, I ’d like to bring "<div class ="page">in the middle so I can do it with CSS. I wrote "" and I wrote it below.

    We haven't investigated whether this can be applied to the questioner's case as it is, but even if it is not possible to apply it directly, I think it is possible to do what you want to do with application.

    <% @ Page Language = "C #" AutoEventWireup = "true"
        CodeFile = "0049-Centering.aspx.cs" Inherits = "_ 0049_Centering"%>
    <! DOCTYPE html>
    <html xmlns = "http://www.w3.org/1999/xhtml">
    <head runat = "server">
    <meta http-equiv = "Content-Type" content = "text/html;charset = utf-8" />
        <title></title>
        <style type = "text/css">
            body {
                background: # 555;
            }
            .content {
                background: white;
                width: 500px;
                height: 300px;
                position: absolute;
                top: 50%;left: 50%;
                margin-left: -250px;
                margin-top: -150px;
                overflow: scroll;
            }
        </style>
    </head>
    <body>
        <form id = "form1" runat = "server">
            <div>
                <h1>This page is horizontally/vaerically centered on
                    screens that are wider than 500/300 pixels.</h1>
                <h2>Resize the browser window to see the effect.</h2>
                <p>An absolutely positioned element is an element whose computed position value is absolute or fixed.
                    The top, right, bottom, and left properties specify offsets from the edges of the element's containing block.
                    (The containing block is the ancestor relative to which the element is positioned.)
                    If the element has margins, they are added to the offset.</p>
            </div>
        </form>
    </body>
    </html>


    The results are as follows. The browser is Chrome 68.0.3440.106.

    See the following article for an explanation of css position.

    position
    https://developer.mozilla.org/en-US/docs/Web/CSS/position

  • Answer # 2

    From the information you know right now, you can only say "Let's give up".
    It's an unclear policy as to why I'm writing a style with a class,
    >However, the position does not change because all are fixed with position: absolute.
    >I want to always display the screen itself in the middle of the browser
    I'm answering myself, so I'll give up the first line of the quote or give up the second line
    As SurferOnWww points out, there isn't much information, and I can't say anything anymore because I think you'll have to decide what to do for reasons you don't have and don't provide it here In state

    There are some things that can be understood if you look at it, but since it may be just reproducing something completely different with mysterious technology, please give frameworks and various information when you ask questions