Попытка центрировать DIV по горизонтали

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я пытаюсь центрировать 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:amp;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, поскольку большая его часть касается ширины.

Спасибо, что уделили мне время,

Не

1. Последний div уже центрирован по горизонтали… Пожалуйста, предоставьте остальную часть CSS

2. Попробуйте margin: auto вместо margin-right: auto .

3. @MiroslavGlamuzina Вы используете bootstrap 3 или bootstrap 4

4. @Saravana запускает скрипку в сообщении

Ответ №1:

Если вы используете bootstrap-4 вызовите класс по умолчанию text-center , чтобы выровнять div по центру. Если вы хотите улучшить дизайн, обратитесь к форме начальной загрузки.

 <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:amp;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>

Ответ №2:

Попробуйте использовать сеточную систему bootstrap, которая представляет собой класс 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/