我正在嘗試將包含影像的 div 和包含表單的 div 水平居中，而不是使用 bulma 垂直居中，它只是沒有回應。無論我做什么，它都保持垂直。我試過 flex-row，justified center，align center，但沒有任何效果。我還能做些什么呢？
<section class="contact section is-small">
<h2 class="contact-header is-size-1"> Contact Me</h2>
<!-- Form -->
<div class="contact-form is-flex is-flex-direction-row">
<div class="form">
<form>
<p>Name</p>
<input type="text" class="input is-normal" placeholder="First Name">
<input type="text" class="input is-normal" placeholder="Last Name">
<p>E-mail Address</p>
<input class="input" type="email" placeholder="E.g. '[email protected]'">
<p>Message</p>
<textarea class="fixed size textarea" placeholder="What's up?"></textarea>
<button class="button">Submit</button>
</form>
<div>
<img src="" class="">
</div>
</div>
</div>
</section>uj5u.com熱心網友回復：
添加display: flex;到justify-content: center;父 div contact-form。然后，您可以h2通過添加text-align: center;.
添加了一個虛擬影像進行演示。
<section class="contact section is-small">
<h2 class="contact-header is-size-1" style="text-align: center;"> Contact Me</h2>
<!-- Form -->
<div class="contact-form is-flex is-flex-direction-row">
<div class="form" style="display: flex; justify-content: space-evenly; align-items: center;">
<form>
<p>Name</p>
<input type="text" class="input is-normal" placeholder="First Name">
<input type="text" class="input is-normal" placeholder="Last Name">
<p>E-mail Address</p>
<input class="input" type="email" placeholder="E.g. '[email protected]'">
<p>Message</p>
<textarea class="fixed size textarea" placeholder="What's up?"></textarea>
<button class="button">Submit</button>
</form>
<div>
<img src="https://dummyimage.com/600x400/000/fff" class="text-center">
</div>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436785.html
下一篇：如何在CSS中重疊元素？