试图水平居中 DIV

Question

我正在尝试将 div id="lastrow" 水平居中

<div class="container">
  <div class="row" style="text-align:center">
    <div class="col-md-12">Name: <input type="text" id="name"><span class="vishid"> Name:</span></div>
    <div class="col-md-12">Company: <input type="text" id="comp"><span class="vishid"> Company:</span></div>
  </div>

  <div class="row" style="text-align:center">
    <div class="col-md-12">Address: <input type="text" id="addr"><span class="vishid"> Address:</span></div>
    <div class="col-md-12">City: <input type="text" id="city"> ST: <input type="text" id="stat"> Zip: <input type="text" id="zip1">-<input type="text" id="zip2"><span class="vishid"> City:</span></div>
  </div>

  <div class="row" style="text-align:center">
    <div class="col-md-12">E-Mail: <input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
    <div class="col-md-12">Phone: (<input type="text" id="area">) <input type="text" id="pho1">-<input type="text" id="pho2"> Extension: <input type="text" id="exte"><span class="vishid"> Phone:</span></div>
  </div>

  <div class="row" id="lastrow" style="display: block;margin-left: 0;margin-right: auto; text-align:center">
    <div class="col-md-12">
      <div>
        Message:&nbsp;
      </div>
      <div>
        <textarea id="mssg"></textarea>
      </div>
    </div>
    <div class="col-md-12">
      <div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
    </div>
  </div>
</div>

我不确定您是否需要 CSS 文件，因为其中大部分是关于宽度的。

感谢您的宝贵时间，

不要

Answer 1

如果你使用bootstrap-4 调用默认类text-center 来对齐div 中心。如果你想让设计更好，请参考bootstrap form。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row text-center">
        <div class="col-md-12">Name:
            <input type="text" id="name"><span class="vishid"> Name:</span></div>
        <div class="col-md-12">Company:
            <input type="text" id="comp"><span class="vishid"> Company:</span></div>
    </div>

    <div class="row text-center">
        <div class="col-md-12">Address:
            <input type="text" id="addr"><span class="vishid"> Address:</span></div>
        <div class="col-md-12">City:
            <input type="text" id="city"> ST:
            <input type="text" id="stat"> Zip:
            <input type="text" id="zip1">-
            <input type="text" id="zip2"><span class="vishid"> City:</span></div>
    </div>

    <div class="row text-center">
        <div class="col-md-12">E-Mail:
            <input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
        <div class="col-md-12">Phone: (
            <input type="text" id="area">)
            <input type="text" id="pho1">-
            <input type="text" id="pho2"> Extension:
            <input type="text" id="exte"><span class="vishid"> Phone:</span></div>
    </div>

    <div class="row text-center" id="lastrow">
        <div class="col-md-12">
            <div>
                Message:&nbsp;
            </div>
            <div>
                <textarea id="mssg"></textarea>
            </div>
        </div>
        <div class="col-md-12">
            <div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
        </div>
    </div>
</div>

Answer 2

尝试使用引导网格系统，即row和col类， 例如，如果您想将 div 居中，请在以下代码之间编写您的 div 代码。

<div class="container">
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
              //insert your div code to center
<form>
  <div class="form-group row">
   <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
   <div class="col-sm-10">
   <input type="text" readonly class="form-control-plaintext" 
  id="staticEmail" value="email@example.com">
 </div>
  </div>
  <div class="form-group row">
   <label for="inputPassword" class="col-sm-2 col-form- 
 label">Password</label>
  <div class="col-sm-10">
  <input type="password" class="form-control" id="inputPassword" 
  placeholder="Password">
   </div>
  </div>
</form>
              <!-- a bootstrap col has 12 that's why am divide col by 4 to 
 center 4+4+4 = 12 -->
        </div>
        <div class="col-md-4">
        </div>
    </div>
 </div>

//或者按照这个引导表单布局来得到这个

https://getbootstrap.com/docs/4.3/components/forms/