I'm trying to center the the div containing the image and the div containing the form horizontally rather than vertically using bulma and it's just not responding. It just stays vertical no matter what I do. I've tried flex-row, justified center, align center and nothing it working. What else can I do about this?

<section >
  <h2 > Contact Me</h2>
  <!-- Form -->
  <div >
    <div >
      <form>
        <p>Name</p>
        <input type="text"  placeholder="First Name">
        <input type="text"  placeholder="Last Name">
        <p>E-mail Address</p>
        <input  type="email" placeholder="E.g. '[email protected]'">
        <p>Message</p>
        <textarea  placeholder="What's up?"></textarea>
        <button >Submit</button>
      </form>
      <div>
        <img src="" >
      </div>
    </div>
  </div>
</section>

CodePudding user response：

Add display: flex; with justify-content: center; to parent div contact-form. You can then center your h2 which is not justified in the center from flex by adding text-align: center;.

Added a dummy image to demonstrate.

<section >
  <h2  style="text-align: center;"> Contact Me</h2>
  <!-- Form -->
  <div >
    <div  style="display: flex; justify-content: space-evenly; align-items: center;">
      <form>
        <p>Name</p>
        <input type="text"  placeholder="First Name">
        <input type="text"  placeholder="Last Name">
        <p>E-mail Address</p>
        <input  type="email" placeholder="E.g. '[email protected]'">
        <p>Message</p>
        <textarea  placeholder="What's up?"></textarea>
        <button >Submit</button>
      </form>
      <div>
        <img src="https://dummyimage.com/600x400/000/fff" >
      </div>
    </div>
  </div>
</section>