html - 居中表单和输入

Question

我一直在尝试将我的表单和输入水平居中，但它不起作用

我试过使用边距和填充，但没有任何效果。

body {
    background-color: #2F2F2F;
}


/* Form (outside) */
.form-inline {
    padding: 1% 0%;
}

/* Input (inside) */
.form-control {
    background-color: #353434;
    border: #3E3E3E 2px solid;
    /* Top right bottom left */

    /* Align the writing in the center*/
    text-align: center;
}


/* Search text */
.form-control::placeholder {
    color: #AEAEAE;
    text-align: center;
}

<header>
    <!-- Search inputForm -->
    <div class="container">
        <form class="form-inline my-2 my-lg-0" action="#POST">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        </form>
    </div>
</header>

标签： htmlcss

Answer 1

.container {
  display: flex;
}

form {
  margin: 0 auto;
}