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

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

lists

//或按照此引导表单布局进行操作

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

Answer 2

如果您使用的是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>

试图水平居中DIV

2 个答案: