<分区>
css - 我如何将我创建的框中的所有内容居中？
似乎无论我尝试什么，白框中的所有内容都不想居中。我已经查看了所有 SO，尝试了一些建议，尝试了 CSS，但它就是不会离开它的位置。
有人可以用这个为我指明正确的方向吗？我只想知道我做错了什么，我该如何解决。如果您需要更多信息，请告诉我:)。
这是我正在谈论的内容的屏幕截图:
这是我的 html 代码:
<div class="container">
<div class="wrapped_content container">
<div class="white_content container">
<div class="row row-eq-height">
<div id="support-form-wrapper" class="col-xs-12 col-sm-12 col-md-8 form-wrapper">
<form class="container" id="submissionForm" name="submissionForm"
enctype="multipart/form-data" method="post">
{{ csrf_field() }}
<input type="hidden" name="submissionFormSubmitted" value="yes">
<div class="col-md-7 name-container">
<div class="name-support-forms">
<div class="form-group" id="name-form">
<p class="form_header center-block">Enter the confirmation code sent to your email.</p>
<input type="text" class="form-control center-block" id="inputNumberConfirm"
placeholder="######" onfocus="onConfirmFocus()">
<span class="subName error">*Required</span>
</div>
</div>
</div>
<div class="col-md-6 submit-btn-wrapper">
<div class="form-group">
<button type="submit"
class="d-block mx-auto btn btn-primary"
data-style="zoom-in" data-size="l">Get Temporary Password
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
这是我的 CSS 代码:
.wrapped_content {
background-color: #EFF0F1;
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
.change_pass.center-block {
color: #717D79;
font-size: 32px;
font-weight: 200;
margin-top: 40px;
padding-top: 5%;
}
.wrapped_content h1, .white_content.container h1 {
text-align: center;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
h1, .h1 {
font-size: 36px;
}
.white_content {
background-color: #fff;
margin-top: 30px;
max-width: 55%;
max-height: 70%;
margin-bottom: 153px;
border: 1px solid #C2C4C4;
height: 100%;
width: 638.797px;
}
#inputNumberConfirm {
max-width: 100px;
float: none;
}
@media (max-width: 684px) {
.white_content {
max-width: 100%;
max-height: 100%;
}
}
.form_header.center-block {
color: #717D79;
font-size: 20px;
font-weight: 200;
margin-top: 40px;
}
p {
margin: 0 0 10px;
}
最佳答案
你使用 bootstrap 的方式不对，我解决了。不要使用网格系统来居中表格
.wrapped_content {
background-color: #EFF0F1;
}
.change_pass.center-block {
color: #717D79;
font-size: 32px;
font-weight: 200;
}
.row-eq-height {
text-align: center;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<div class="wrapped_content">
<div class="white_content">
<div class="row-eq-height">
<div id="support-form-wrapper" class="col-12 form-wrapper">
<form class="container" id="submissionForm" name="submissionForm" enctype="multipart/form-data" method="post">
{{ csrf_field() }}
<input type="hidden" name="submissionFormSubmitted" value="yes">
<div class="name-container">
<div class="name-support-forms">
<div class="form-group" id="name-form">
<p class="form_header center-block">Enter the confirmation code sent to your email.</p>
<input type="text" class="form-control center-block" id="inputNumberConfirm"
placeholder="######" onfocus="onConfirmFocus()">
<span class="subName error">*Required</span>
</div>
</div>
</div>
<div class="submit-btn-wrapper">
<div class="form-group">
<button type="submit" class="d-block mx-auto btn btn-primary" data-style="zoom-in" data-size="l">Get Temporary Password
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>关于css - 我如何将我创建的框中的所有内容居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54368800/