[英]Center Bootstrap form-control to center of browser
我試圖將表單控件居中放置在我網站的中心,但是由於某些原因,CSS不適用於表單控件,但它適用於div中的其他所有內容...
這是我的HTML:
<div id="search">
<h2 style="color:deepskyblue">Enter battle-tag</h2>
<div class="row">
<div class="col-md-12">
@using (Html.BeginForm())
{
@Html.TextBox("profileId", null, new { @class = "form-control" }); <br />
<p style="color:red">Replace the "#" in your battle-tag with an "-"</p>
<p style="color:red"> Search is Case-Sensitive </p>
<button class="btn btn-primary" type="submit"> Find Player </button>
}
</div>
</div>
</div>
這是我的CSS:
body {
height: 100%;
width: 100%;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.dl-horizontal dt {
white-space: normal;
}
input,
select,
textarea {
max-width: 280px;
}
#search{
text-align:center;
margin-top:10%;
margin-left:10%;
}
顯然,Bootstrap.css是默認的,我完全沒有碰過它。
您可以通過將元素渲染為嵌入式塊來居中,然后將父級的text-align屬性設置為居中。
<div style="text-align:center;">
<div style="display:inline-block;">This should be in the middle</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.