html - 发布体内定心形式 | HTML

Question

我目前将此作为脚本的一部分，标题和 2 个段落正确居中，但容器和按钮位于左侧。我试过使用 <center> </center>但我不知道在哪里正确应用它们以使表单和按钮居中。

需要居中的截图:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="jumbotron text-center">

  <h1>Header Text</h1>
  <p>Paragraph</p>
  <p>Paragraph 2</p>

</div>

<div class="container">
  <form action="excel-script.php" method="post" enctype="multipart/form-data">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <input type="file" name="excelDoc" id="excelDoc" class="form-control" />
        </div>
      </div>
      <div class="col-md-4">
        <input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
      </div>
    </div>
  </form>
</div>

Answer 1

将“text-center”类添加到行中并编辑“col”类使其总和为 12

<div class="container" >
    <form action="excel-script.php" method="post" enctype="multipart/form-data">
       <div class="row text-center">
           <div class="col-md-2"></div>
           <div class="col-md-4">
               <div class="form-group">
                   <input type="file" name="excelDoc" id="excelDoc" class="form-control" />
               </div>
           </div>
           <div class="col-md-3">
               <input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
           </div>
           <div class="col-md-3"></div>
       </div>
    </form>
</div>