페이지의 내용을 중앙에 배치하는 방법

다음은 asp.net 양식의 코드입니다. 양식의 내용을 중앙에 표시하고 싶습니다. 첫 번째 div의 스타일이 작동하지만 두 번째 div 내용이 가운데에 있지 않습니다.페이지의 내용을 중앙에 배치하는 방법

<head runat="server"> 
    <title></title> 
</head> 
<style type="text/css"> 
    #frm { position: fixed; 
     top: 50%; 
     left: 50%; 
     width: 50%; 
     height: 200px; 
     margin: -100px 0 0 -25%;} 
    </style> 
<body> 
<div id="frm"> 
    <form id="form1" runat="server"> 
    <div style="margin-left:auto;"> 
    <asp:TextBox ID="txtbx" runat="server"></asp:TextBox> 
    <br /> 
    <br /> 
    <asp:Button ID="button1" runat="server" Text="Submit" OnClick="btn_click" /> 
    <asp:Button ID="button2" runat="server" Text="Next" OnClick="btn_clicked" /> 
    <hr /> 
    <asp:Label ID="label1" runat="server"></asp:Label> 
    </div> 
    </form> 
</div> 
</body>

출처

2014-11-19 Noob_coder

아래에서 스타일을 업데이트하십시오.

#frm { position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 50%; 
    height: 200px; 
    margin: -100px 0 0 -25%; 
    text-align: center; 
}

출처

2014-11-19 07:01:42

부모의 div를 가운데에 배치하려면 margin: auto;을 사용해야합니다. 이것을 사용하려면 div의 너비를 설정해야합니다.

#frm { 
    width: 50%; 
    margin: 0 auto; 
} 

#form1 { 
    width: 100%; 
} 

#form1 > div { 
    width: 80%; 
    margin: 0 auto; 
}

출처

2014-11-19 06:56:07 Jerodev

페이지의 내용을 중앙에 배치하는 방법

답변

관련 문제