Question

我有一个HTML表单，其输入字段已经居中，但它们没有垂直对齐。

Not Vertically Aligned

我希望所有标签和输入都垂直对齐，以便所有标签都在同一垂直线上，并且所有输入都在同一垂直线上。

到目前为止，我所拥有的只是div中的字段：

<div class="container" align="center">

Answer 1

#formContainer{
  width:40%;
  margin:auto;
}
#formC{
  width:100%;
}
.rows{
  width:100%;
  display:block;

}
.column{
    width:100%;
    display:inline-block;
    
}
.theLabels{
  
  width:30%
  float:left;
}
.theInputs{
  

  width:60%;
  float:right;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<div id="formContainer">
<form id="formC">
<div class="rows">
  <div class="column">
      <label class="theLabels">

        URL:
    </label>
      <input class="theInputs" type="text"/>
  </div>
  <div class="column">
      <label class="theLabels">

        Code Base:
    </label>
      <input class="theInputs" type="text"/>
  </div>
  <div class="column">
      <label class="theLabels">

        Email:
    </label>
      <input class="theInputs" type="email"/>
  </div>

</div>


</form>
</div>
</body>

</html>

如果要连续两列，则应将列类中的width：100％更改为width：48％或将另一个类的width：48％更改为width：48％。希望对您有帮助

Answer 2

您是否正在使用Bootstrap？

创建一个主要的div并将所有内容放入其中。.

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

See HERE

Answer 3

为此，锻炼是要拥有一个可以容纳整个表格的主体，然后将每个标签包裹在具有固定宽度的元素中，然后可以对输入元素进行相同的操作。

提琴：

https://jsfiddle.net/7mnxwdgv/14/

<html>

     <head>

         <style type="text/css">

div.container {
               width: 350px;
               padding: 15px;
               margin: 50px auto 0px auto;
               clear: both;
               overflow: hidden;
             }

             div.container span.label-holder {
               display: block;
               width: calc(25% - 10px);
               float: left;
               padding: 5px;
             }

             div.container span.input-holder {
               display: block;
               width: calc(75% - 10px);
               float: left;
               padding: 5px;
             }

             div.container span.input-holder input[type="text"]{
               width: 100%;
             }

         </style>

     </head>

    <body>

        <div class="container">

            <form>

                 <span class="label-holder"><label for="url">URL</label></span>
                 <span class="input-holder"><input type="text" id="url" name="url" placeholder="url" /></span>

                 <span class="label-holder"><label for="code-base">Code Base</label></span>
                 <span class="input-holder"><input type="text" id="code-base" name="Code-Base" placeholder="Code Base" /></span>

                 <span class="label-holder"><label for="from">From</label></span>
                 <span class="input-holder"><input type="text" id="from" name="from" placeholder="From" /></span>

                 <span class="label-holder"><label for="to">to</label></span>
                 <span class="input-holder"><input type="text" id="to" name="to" placeholder="To" /></span>

                 <span class="label-holder"><label for="email">Email</label></span>
                 <span class="input-holder"><input type="text" id="email" name="email" placeholder="Your Email" /></span>

                 <span class="label-holder"><label for="app-serv">Application Servers</label></span>
                 <span class="input-holder">

                      <select name="app-serv" id="app-serv">
                        <option value="Incent">Incent</option>
                      </select>

                 </span>

            </form>

        </div>

    </body>

</html>

HTML表单，如何垂直对齐和居中输入字段？

3 个答案: