它在移動設備上看起來很棒，但是當網站以更大的螢屏尺寸呈現時，從所附影像中可以看出，主要表單內容（所有內容#form_content）都對齊到中心的左側。
我嘗試將諸如'justify-content-center',之類的屬性'align-items-center' 'mx-auto'放在各種位置divs，但無法讓該內容移動到大螢屏的中間！
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="p-5 container-fluid text-center" id="banner">
<h1 class="display-1" id="title">Contact Us</h1>
<img src="images/marine_divider1_lmbc_red.png" id="wheel" alt="divider"><br>
</div>
<section id="contact">
<div class="container-fluid col-md-6 mx-auto mt-3 ">
<form class="form" name="form" autocomplete="off" action="https://formsubmit.co/[email protected]" method="POST">
<div class="mb-3" id="form_box">
<label class="form-label" for="name" style="color: black; margin-bottom: 0px;">Name:</label>
<input class="form-control" id="name" type="text" name="name" required style="max-width: 500px; margin-top: 0px;">
</div>
<div class="mb-3" id="form_box">
<label class="form-label" for="email" style="color: black; margin-bottom: 0px">Email Address:</label>
<input class="form-control" id="email" type="email" placeholder="e.g. [email protected]" name="email" required style="max-width: 500px; margin-top: 0px;">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else without your permission.</div>
</div>
<div class="mb-5" id="form_box">
<label class="form-label" for="subject" style="color: black; margin-bottom: 0px">Subject:</label>
<input class="form-control mb-2" id="subject" type="text" name="subject" style="max-width: 500px; margin-top: 0px;">
</div>
<div class="form-floating mb-5" id="form_box">
<textarea id="query" class="form-control" name="message" spellcheck="true" style="height: 250px; overflow-y: visible; max-width: 500px"></textarea>
<label for="query" class="textlab">Type your message here: <span class="tooltip" data-tooltip="Type your message here">?</span></label>
</div>
<div class="form-floating mb-5" id="form_box">
<textarea id="query" class="form-control" name="mark" spellcheck="true" style="height: 100px; max-width: 500px"></textarea>
<label for="query" class="textlab">How did you hear about us?<span class="tooltip" data-tooltip="Just a few words on how you found our website and heard about our club">?</span></label>
</div>
<div class="mb-5 text text-center">
<button type="submit" id="conbtn" class="btn btn-danger btn-lg btn-block">Send Now!</button>
</div>
</form>
<div class="container text-center mx-auto">
<img src="images/controllertransp.png" id="controller" alt="divider"><br>
</div>
</div>
</section>這是我在本節中使用的相關外部 CSS：
section {
width: 100%;
position: relative;
justify-content: center;
}
uj5u.com熱心網友回復：
你能改變HTML嗎？最大的問題是您section不是 flex 父級，因此這些屬性（justify-content、align-等）都不會影響子元素。
您可能要考慮的是在其中添加row元素container-fluid以及使用col類來包裝表單。
另一個問題是您的表單欄位（.form-control輸入元素）有一個max-width使用行內樣式的集合，因此在較大的螢屏上它們可能不會顯示為居中，因為它們的寬度會比包含col元素的寬度短。
您可以洗掉該行內樣式（如果不需要）以實作居中外觀。我放入了自定義 CSS 來設定max-width: none !important以顯示洗掉行內樣式的影響。
.form-control {
max-width: none !important/* override the inline style */
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-5 container-fluid text-center" id="banner">
<h1 class="display-1" id="title">Contact Us</h1>
<img src="images/marine_divider1_lmbc_red.png" id="wheel" alt="divider"><br>
</div>
<section id="contact">
<div class="container-fluid">
<!-- added this -->
<div class="row">
<!-- added this the offset class adds the margin left the equivalent of the columns -->
<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
<form class="form" name="form" autocomplete="off" action="https://formsubmit.co/[email protected]" method="POST">
<div class="mb-3" id="form_box">
<label class="form-label" for="name" style="color: black; margin-bottom: 0px;">Name:</label>
<input class="form-control" id="name" type="text" name="name" required style="max-width: 500px; margin-top: 0px;">
</div>
<div class="mb-3" id="form_box">
<label class="form-label" for="email" style="color: black; margin-bottom: 0px">Email Address:</label>
<input class="form-control" id="email" type="email" placeholder="e.g. [email protected]" name="email" required style="max-width: 500px; margin-top: 0px;">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else without your permission.</div>
</div>
<div class="mb-5" id="form_box">
<label class="form-label" for="subject" style="color: black; margin-bottom: 0px">Subject:</label>
<input class="form-control mb-2" id="subject" type="text" name="subject" style="max-width: 500px; margin-top: 0px;">
</div>
<div class="form-floating mb-5" id="form_box">
<textarea id="query" class="form-control" name="message" spellcheck="true" style="height: 250px; overflow-y: visible; max-width: 500px"></textarea>
<label for="query" class="textlab">Type your message here: <span class="tooltip" data-tooltip="Type your message here">?</span></label>
</div>
<div class="form-floating mb-5" id="form_box">
<textarea id="query" class="form-control" name="mark" spellcheck="true" style="height: 100px; max-width: 500px"></textarea>
<label for="query" class="textlab">How did you hear about us?<span class="tooltip" data-tooltip="Just a few words on how you found our website and heard about our club">?</span></label>
</div>
<div class="mb-5 text text-center">
<button type="submit" id="conbtn" class="btn btn-danger btn-lg btn-block">Send Now!</button>
</div>
</form>
<div class="container text-center mx-auto">
<img src="images/controllertransp.png" id="controller" alt="divider"><br>
</div>
</div>
</div>
</div>
</section>uj5u.com熱心網友回復：
您可以嘗試為整個表單和頁面上的其他元素使用單個容器。這將有助于集中您的所有內容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507477.html