Flexbox 没有响应？

发布于 2025-01-10 03:08:42 字数 1411 浏览 0 评论 0原文

我试图使用 bulma 将这两个 div 水平居中，但它没有响应。我尝试过 flex-row、对齐中心、对齐中心，但没有任何效果。对此我还能做什么？

 **EDIT TO ADD MORE CODE**

 <!-- contact form  -->
<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>

原文

I'm trying to center these two divs horizontally using bulma and it's just not responding. I've tried flex-row, justified center, align center and nothing it working. What else can I do about this?

 **EDIT TO ADD MORE CODE**

 <!-- contact form  -->
<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城凉梦凉人心 2025-01-17 03:08:42

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" rel="stylesheet"/>
 <div class="contact-form is-flex is-justify-content-center ">
            <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>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" rel="stylesheet"/>
 <div class="contact-form is-flex is-justify-content-center ">
            <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>

回复收藏 0 原文

帥小哥 2025-01-17 03:08:42

这会帮助你

 <div class="contact-form is-flex is-flex-direction-column is-justify-content-center is-align-items-center">
            <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>

        <div>
          <img src="" class="" />
        </div>

This will help you

 <div class="contact-form is-flex is-flex-direction-column is-justify-content-center is-align-items-center">
            <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>

        <div>
          <img src="" class="" />
        </div>

回复收藏 0 原文

~没有更多了~