Question

请需要帮助以使标签在容器中居中。

我已向图像添加了URL链接，因为由于某种原因它在上传到网站时遇到了问题。

我也将宽度设置为50％，因为我不希望它们占据流体容器的整个宽度。

我尝试使用文本中心，但是当我将宽度更改为50％时，标签默认为左侧。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <section>
      <div class="container-fluid text-center">
        <div class="newsletter p-5">
          <form>
            <h2>Sign up to our newsletter</h2>
            <p>Recieve the lastest news and offers by signing up today.</p>
            <div class="form-group text-center">
              <label for="input-name" class="sr-only">Your Name:</label>
              <input type="text" class="form-control text-center" placeholder="firstname lastname" id="input-name">
            </div>
            <div class="form-group text-center">
              <label for="input-email" class="sr-only">Your Email:</label>
              <input type="email" class="form-control text-center" placeholder="mail@example.com" id="input-email">
            </div>
            <div class="form-check">
              <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="input-terms" value="terms">
                  I have read and accept the <a href="#" data-toggle="modal" data-target="#modal"> terms and conditions.</a> 
                </label>
            </div>
            <div>
              <small class="form-text">You can unsubscribe from the mailing list at anytime</small>
              <button type="submit" class="m-1 btn btn-dark">SIGN UP</button>
            </div>
          </form>
          <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                </div>
                <div class="modal-body">
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Answer 1

尝试一下：

form-group {
    width: 50%;
    margin: 0 auto;
    padding: 5px;
}

Answer 2

尝试一下：

<div class="newsletter p-5">  
  <div class="row">
    <div class="col-12 col-sm-6 offset-sm-6">

       <!-- Your form here --->

    </div>
  </div>
</div>

此外，删除50％的宽度，引导程序列将解决此问题。

文档：https://getbootstrap.com/docs/4.1/layout/grid/#offsetting-columns

Answer 3

包装您的form内容

 <div class="d-flex justify-content-center">
        <div class="col-md-6 col-lg-5 col-sm-8">
         <form>Your Content Here
        </form>
      </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container-fluid text-center">
  
    
    <div class="newsletter p-5">
    <div class="d-flex justify-content-center">
    <div class="col-md-6 col-lg-5 col-sm-8">
      <form>
        <h2>Sign up to our newsletter</h2>
        <p>Recieve the lastest news and offers by signing up today.</p>
        <div class="form-group text-center">
          <label for="input-name" class="sr-only">Your Name:</label>
          <input type="text" class="form-control text-center" placeholder="firstname lastname" id="input-name">
        </div>
        <div class="form-group text-center">
          <label for="input-email" class="sr-only">Your Email:</label>
          <input type="email" class="form-control text-center" placeholder="mail@example.com" id="input-email">
        </div>
        <div class="form-check">
          <label class="form-check-label">
              <input type="checkbox" class="form-check-input" id="input-terms" value="terms">
              I have read and accept the <a href="#" data-toggle="modal" data-target="#modal"> terms and conditions.</a> 
            </label>
        </div>
        <div>
          <small class="form-text">You can unsubscribe from the mailing list at anytime</small>
          <button type="submit" class="m-1 btn btn-dark">SIGN UP</button>
        </div>
      </form>
      </div>
  </div>
      <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 4

只需为placeholder添加CSS，如下所示

input::placeholder{text-align:center;}

如何在容器引导程序4中居中放置标签

4 个答案: