Question

在我的网站上，我希望<form>居中。我已经尝试了一切，但仍然无法正常工作。它可能与我的网站在WordPress中有关吗？

<section id="jobify_widget_search_hero-2" class="widget widget--home widget--home--no-margin widget--home-hero-search">
        <div class="hero-search hero-search--has-overlay hero-search--height-large" style="background-image:url(http://jobboard.jobsbe.be/wp-content/uploads/2017/03/widget-home-feature-callout-1-2.jpg); ?>; background-position: center center">

        <div class="container">
            <div class="hero-search__content" style="color:#ffffff"><h1 class="hero-search__title" style="color:#ffffff">Vacatures</h1></div>


    <form class="job_search_form job_search_form--flat" action="http://jobboard.jobsbe.be/find-a-job/" method="GET" style="text-align:center" >

        <div class="search_jobs">

            <div class="search_keywords">
                <label for="search_keywords">Keywords</label>
                <input type="text" name="search_keywords" id="search_keywords" placeholder="Keywords">
            </div>

            <div class="search_location">
                <label for="search_location">Location</label>
                <input type="text" name="search_location" id="search_location" placeholder="Location">
            </div>

            <div class="search_submit">
                <input type="submit" name="submit" value="Search">
            </div>
    </form>


        </div>

        </div>

</section>

该网站的网页为http://jobboard.jobsbe.be/test/

输入框和搜索框需要居中。

Answer 1

style.css文件中有此规则：

.search_jobs > div, .search_resumes > div {
    float: left;
}

将其更改为

.search_jobs > div, .search_resumes > div {
    display: inline-block;
}

然后父容器中的中心将起作用。

对齐表格居中

1 个答案: