需要帮助使标签在容器中居中。
我已在图片上添加了URL链接,因为由于某种原因它在上传到网站上时出现了问题。
我也将宽度设置为50%,因为我不希望它们占据液体容器的整个宽度。
我尝试使用文本中心,但是当我将宽度更改为50%时,标签默认为左侧。
image
<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">×</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>
最佳答案
尝试这个:
form-group {
width: 50%;
margin: 0 auto;
padding: 5px;
}
关于html - 如何在容器 bootstrap 4中居中放置标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51727075/