ASP.NETの画面デザインの書き方について

※質問の内容を変えています。

環境は
VS2017
ASP.NET WebForm
.NET Framework4.6.1
GrapeCity.Web.Input.v100

下記のような画面を作っていますが
Styleのpositionをabsoluteで作成しているため常に固定位置となっています。

⇒少し、調べたところ、positionにはrelativeというものがあり
これは相関位置指定できるものとわかりました。

１．画面を常にブラウザの中央に表示したい
⇒positionをrelativeに変更して
margin-right: auto;
margin-left: auto;
とすることで左右の中央にできましたが、上下は一番上に固定のままです。
上下を中央にする場合も何かmargin-right、margin-leftのようなものがあるのでしょうか？

２．現在、テキストやラベルの設置位置や高さ、幅などの設定をベタ書きしてますが
一般的に設置する際に設置位置や高さ、幅などの設定は
CSSで各テキストやラベル毎に設定を行うものなのでしょうか？

★ソースＵＰするときに個人情報やらパスワード云々であげれなかったので
パスワードとかPAsswordとかのキーワードをHOGEとかに変えてます。
★どうしても最後のソースがＵＰできなかったので
試しに回答へ貼り付けたらＵＰ成功しました

以上、よろしくお願いします。

※Styleのpositionをabsoluteで作成していたときの画面

`

HTML5
1<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteOther.master.cs" Inherits="SiSyokuinKanriWeb.SiteOther" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml">
6<head runat="server">
7    <base target="_self" />
8    <title><%= formtitle %></title>
9    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
10    <!--戻るボタンで戻りたくない画面に記述-->
11    <script type="text/javascript">
12        history.forward();
13    </script>
14
15    <script src="../../script/Html5Viewer/jquery-1.10.2.js" type="text/javascript"></script>
16    <script>
17
18        $(function () {
19            //------------------------
20            // jQueryキー制御
21            // return値falseによりキーキャンセル
22            //------------------------
23            $(document).keydown(function (event) {
24                //alert("AAA");
25                // クリックされたキーのコード
26                var keyCode = event.keyCode;
27                // キーイベントが発生した対象のオブジェクト
28                var obj = event.target;
29                // バックスペースキーを制御する
30                if (keyCode == 8) {
31                    //alert(obj.tagName);
32                    //alert(obj.type);
33                    // テキストボックス／テキストエリアを制御する
34                    if ((obj.tagName == "INPUT" && (obj.type == "TEXT" || obj.type == "text"))
35              	      || obj.tagName == "TEXTAREA") {
36                        // 入力できる場合は制御しない
37                        if (!obj.readOnly && !obj.disabled) {
38                            //alert("OK");
39                            return true;
40                        }
41                    }
42                    return false;
43                }
44            });
45        });
46    </script>
47    <script type="text/javascript">
48        window.document.onkeydown = function () {
49            if (event.keyCode == 116) {
50                alert("F5 キーが押されました。F5ボタンやブラウザ更新ボタンは誤作動の原因となるため押下しないでください。もし再表示確認の画面が表示された場合はキャンセルボタンで戻ってください。");
51                event.keyCode = 0;
52                return false;
53            }
54        }
55    </script>
56
57    <asp:ContentPlaceHolder ID="head" runat="server">
58    </asp:ContentPlaceHolder>
59
60</head>
61<body>
62    <div class="page" >
63        <form id="form1" runat="server">
64
65            <div class="main" style="position: relative; top: -7px; height:620px; border:dotted;">
66                <asp:ContentPlaceHolder ID="MainContent" runat="server">
67
68
69
70
71                </asp:ContentPlaceHolder>
72            </div>
73
74            <asp:Panel ID="Panel2" runat="server" class="footer" 
75                style="position: relative; top:-13px; height: 10px; width: 1050px;  background: #0066FF;" >
76
77                <asp:Label ID="Label1" runat="server"  
78                    style="position: relative; left:2px; top:-3px; text-align:left; vertical-align:top;"
79                    Font-Italic="True" Font-Size="11px" Font-Bold="True" ForeColor="White"   Text="CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"></asp:Label>
80
81                <asp:Label ID="Label2" runat="server" 
82                    style="position: relative; left:2px;"
83                    Font-Italic="True" Font-Size="11px" Font-Bold="True" ForeColor="White"></asp:Label>
84
85                <asp:Label ID="Label4" runat="server" 
86                    Font-Italic="True" Font-Size="9px" 
87                    style="position: relative; left:300px; top:-3px; text-align:right; vertical-align:top;"
88                    Text="Copyright c 株式会社xxxxxxxx　All Rights Reserved." Font-Bold="True" ForeColor="Yellow"></asp:Label>
89            </asp:Panel>
90
91        </form>
92    </div>
93
94</body>
95</html>
96
97

CSS
1/* DEFAULTS
2----------------------------------------------------------*/
3body {
4   padding: 0 20px;
5    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
6}
7
8.fakeContainer { /* The parent container */
9    border-style: none;
10    border-color: inherit;
11    border-width: medium;
12    margin: 0 0 20px;
13    width: 709px; /* Required to set */
14    height: 18px; /* Required to set */
15    overflow: hidden; /* Required to set */
16}
17
18.spreadbtn
19{
20    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
21    font-size: 9px;
22}
23
24.btn
25{
26    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
27    font-size: 11px;
28}
29
30.btn:hover {
31	background-color: #fff;
32	border-color: #59b1eb;
33	color: #59b1eb;
34}
35
36.lbl
37{
38    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
39    font-size: 11px;
40}
41
42.lblHead
43{
44    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
45    font-size: 11px;
46}
47
48.rdo
49{
50    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
51    font-size: 11px;
52}
53
54.chk
55{
56    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
57    font-size: 11px;
58}
59
60.txt
61{
62    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
63    font-size: 11px;
64}
65
66.date
67{
68    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
69    font-size: 11px;
70}
71
72.cmb
73{
74    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
75    font-size: 11px;
76}
77
78.lnk
79{
80    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
81    font-size: 11px;
82}
83
84body {
85    background: #F0F0F0;
86    font-size: .80em;
87    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
88    margin-right: auto;
89    margin-left: auto;
90    padding: 0px;
91    color: #000066;
92}
93
94a:link, a:visited
95{
96    color: #034af3;
97}
98
99a:hover
100{
101    color: #1d60ff;
102    text-decoration: none;
103}
104
105/* HEADINGS   
106----------------------------------------------------------*/
107
108
109/* PRIMARY LAYOUT ELEMENTS   
110----------------------------------------------------------*/
111.center {
112    border: 0px;
113    text-align: center;
114}
115
116.page {
117    position: static;
118    height: 650px;
119    width: 1050px;
120    background-color: #fbfffe;
121    border: 1px solid #496077;
122    margin-right: auto;
123    margin-left: auto;
124}
125
126.header {
127    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
128    position: relative;
129    margin: 0px;
130    padding: 0px;
131    background: #fbfffe;
132    width: 99%;
133    top: 0px;
134    margin-right: auto;
135    margin-left: auto;
136    height: 114px;
137}
138
139.main {
140    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
141    padding: 0px 12px;
142    margin: 12px 8px 8px 8px;
143    min-height: 420px;
144}
145
146.footer
147{
148    font-family: Verdana, "Meiryo UI", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "MS Pゴシック", sans-serif;
149    color: #4e5766;
150    padding: 8px 0px 0px 0px;
151    margin: 0px auto;
152    text-align: center;
153    line-height: normal;
154}
155
156.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
157{
158    height:auto !important;
159}
160
161.FpImage img
162{
163    height: 20px;
164    width: 20px;
165}

退会済みユーザー

2018/08/24 10:57

情報提供が不十分で質問になってないです。何が不足かと言うと、(1) 何を作っているか書いてない（コードを読めばわかるとは言わないでください。あなたが最初の一行目に書けば回答者・閲覧者は一目で分かることなのですから）、(2) 開発環境が書いてない、(3) im_combo とか im_edit とか何だか不明、(4) class 定義が多々不明。

退会済みユーザー

2018/08/24 10:59

ASP.NET レンダリングする html ソースと、それに適用されるスタイルが分かるように書かないと答えは出てこないと思いますよ。私の言っていることが理解できますか？

退会済みユーザー

2018/08/24 11:00

一度 https://teratail.com/help/question-tips を読むことをお勧めします。

len_souko

2018/08/25 09:24

aspxのソースは残しておいてほしい。cssだけだとさっぱりわかんない

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問