Html 如何对齐网页的 Bootstrap 面板中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42403629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align Bootstrap panel center of a web page?
提问by user3175327
I would like to align this entire panel center of the web page. Could someone help me out on this?
我想对齐网页的整个面板中心。有人可以帮我解决这个问题吗？
Also could you please help me a good book I can use to learn Bootstrap design?
另外你能帮我一本好书，我可以用它来学习 Bootstrap 设计吗？
<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>
Thanking you
Swetha
感谢您
Swetha
回答by Murtza
You can remove css style from paneland wrap this as follows.
您可以删除 css 样式panel并将其包装如下。
<div class="col-sm-6 col-sm-offset-3">
<div class="panel panel-default">
...
</div>
</div>
回答by Garth Sebastian
just add
只需添加
position:fixed
位置：固定
and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/xyrkyxe8/
即使您向下滚动，它也会保持在视图中。在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;
}
回答by HeyJude
It worth saying that in order to center a panel, or even a group of pannels, it's also possible to use a combination of flex and justify-contentproperty:
值得一提的是，为了使一个面板，甚至一组面板居中，还可以使用 flex 和justify-contentproperty的组合：
.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>