将两个 div 水平居中时出现问题

Question

我试图使用 bulma 将包含图像的 div 和包含表单的 div 水平居中而不是垂直居中，但它没有响应。无论我做什么，它都保持垂直。我已经尝试过 flex-row、对齐中心、对齐中心，但没有任何效果。我还能做些什么？

<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. 'john.smith@gmail.com'">
        <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>

Answer 1

将 display: flex; 和 justify-content: center; 添加到父级 div contact-form。然后，您可以通过添加 text-align: center;.

将您的 h2 居中，这在 flex 的中心不合理

添加了一个虚拟图像来演示。

<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. 'john.smith@gmail.com'">
        <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>

将两个 div 水平居中时出现问题

Trouble centering two divs horizontally

html

css

flexbox

bulma