ASPでのログインフォームデザインの問題MVC

Question

私はASP MVCプログラムにログインフォームコードを持っています。 私には2つの問題があります。 1）ログインフォームは中央に配置されていません。 2）フォームコントロールは、ログインフォームの中央に配置されていません。私は、彼らが中心にあるフォームグループのdivのための境界線を置くと気づきました、そしてまた私は彼らのために境界線を置くことも気づいた。テキストボックスがフォームの途中に表示されない理由はわかりません。

<div class="row"> 
<div class="col-md-4 col-md-offset-4 shadow" style="background-color:#0375b4;"> 

     <section id="loginForm"> 

       @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) 
     { 
        @Html.AntiForgeryToken() 
        @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

        <div class="col-md-12" style="margin-top:0.75cm"> 
         <img class="profile-img" src="~/Content/Images/avatar1.png" /> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-12"> 
          @Html.LabelFor(m => m.Email, new { @class = "control-label", style = "color:white;" }) 
         </div> 
        </div> 

        <div class="form-group "> 
         <div class="col-md-12 "> 
          @Html.TextBoxFor(m => m.Email, new { @class = "form-control ", @style = "text-align:left" }) 
          @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" }) 
         </div> 
        </div> 


        <div class="form-group"> 
         <div class="col-md-12"> 
          @Html.LabelFor(m => m.Password, new { @class = "control-label", style = "color:white;" }) 
         </div> 
        </div> 


        <div class="form-group"> 
         <div class="col-md-12"> 
          @Html.PasswordFor(m => m.Password, new { @class = "form-control", @style = "text-align:left" }) 
          @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-12"> 
          <div class="checkbox"> 
           @Html.CheckBoxFor(m => m.RememberMe) 
           @Html.LabelFor(m => m.RememberMe, new { style = "color:white;" }) 
          </div> 
         </div> 
        </div> 


         <div class="form-group"> 
          <div class="col-md-12"> 
           <input type="submit" value="Submit" class="btn btn-primary btn-block" /> 
          </div> 
         </div> 


       } 

       <div style="height:20px"> 

       </div> 

Answer 1

次のCSSクラス

div.centered { 
    margin: 0 auto; 
    width: 800px; 
} 

そして、あなたのコンテナ部門に設定を作成します。

Answer 2

Iは以下のようにbootstrap.cssでクラスを追加することによって、フォームコントロールの集中解く：

.center_div{ 
     margin: 0 auto; 
      width:80% /* value of your choice which suits your alignment */ 
    } 

、私は設定

<section id="loginForm" class="center_div"> 

とフォームコントロールでログインフォームビューでこのクラスを使用フォームの途中で