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>

Answer 1

.container {
  display: flex;
}

form {
  margin: 0 auto;
}

Answer 2

要使表格垂直居中，您可以这样做

form{
width:fit-content;
margin:0 auto
}

对于垂直和水平中心，您可以按transform:translate(-50%,-50%)进行操作。以下是工作片段

form{
width:fit-content;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

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;
}
form{
width:fit-content;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

<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>

Answer 3

您应该了解flexbox，在引导程序中居中，因为您希望使用的类是：

justify-content-center

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header>
    <!-- Search inputForm -->
    <div class="container">
        <form class="form-inline my-2 my-lg-0 justify-content-center" action="#POST">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        </form>
    </div>
</header>

以表格和输入为中心

3 个答案: