web-dev-qa-db-ja.com

Webページのパネルの中央にBootstrap？

このパネル全体をWebページの中央に揃えたいと思います。誰かがこれを手伝ってくれますか？

Bootstrap design？

<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
            <div class="panel-heading">
                <h3 class="panel-title text-center">User Login</h3>
            </div>
            <div class="panel-body">
                @Html.ValidationSummary(true)

                <table class="table">
                    <tbody>
                        <tr>
                            <td>@Html.LabelFor(model => model.Username)</td>
                            <td>@Html.EditorFor(model => model.Username)</td>
                            <td>@Html.ValidationMessageFor(model => model.Username)</td>                            
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(model => model.Password)</td>
                            <td>@Html.EditorFor(model => model.Password)</td>
                            <td>@Html.ValidationMessageFor(model => model.Password)</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="Login" class="btn btn-default" style="" />
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>             

            </div>
        </div>


ありがとう
スウェタ

htmlcssasp.net-mvctwitter-bootstrap
7
user3175327

panelからcssスタイルを削除し、次のようにラップできます。

<div class="col-sm-6 col-sm-offset-3">
  <div class="panel panel-default">
    ...
  </div>
</div>
14
Murtza

パネルまたはパネルのグループを中央に配置するために、flexとjustify-contentプロパティの組み合わせを使用することもできます。

.row-fluid {
   display: flex;
   justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row text-center row-fluid">
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 1</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 2</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 3</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</div>
0
HeyJude

追加するだけ

位置：固定

下にスクロールしても表示されます。 http://jsfiddle.net/xyrkyxe8/ でご覧ください

#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
0
Garth Sebastian