Question

有以下HTML标记：

    input[type="password"] {
      margin-left: 10px;
      background: #F2F2F2;
      height: 35px;
      font-style: normal;
      font-size: 14px;
      border: 0;
    }
    
    input[type="submit"] {
      display: inline-block;
      text-decoration: none !important;
      color: #fff;
      background: #000;
      font-size: 10px;
      line-height: 1.7;
      padding: 9px 29px;
      position: relative;
      text-align: center;
      cursor: pointer;
      text-transform: uppercase;
      -webkit-transition: all 200ms ease-out;
      -moz-transition: all 200ms ease-out;
      -o-transition: all 200ms ease-out;
      transition: all 200ms ease-out;
      border: none;
      font-weight: normal;
      letter-spacing: 2px;
    }

<p>
      <label for="pwbox-59">Password: <input name="post_password" id="pwbox-59"   type="password" size="20"></label> 
      <input type="submit" name="Submit" value="Enter">
    </p>

如何垂直对齐一行中的输入？提前谢谢！

Answer 1

添加：

p {
  display:flex;
}

小提琴：https://jsfiddle.net/py4x7zhk/

Answer 2

尝试执行以下操作：

  <div style="display:table;">
      <div style="display:table-cell;vertical-align:middle;">
          <label for="pwbox-59">Password: </label>
          <input name="post_password" id="pwbox-59"   type="password" size="20">
      </div>
  </div>
  <input type="submit" name="Submit" value="Enter">

Answer 3

您的问题具有误导性，将项目排列在＆＃34;行＆＃34;根据定义意味着水平。但是你说垂直。所以我假设你的意思是在一列不是一行。

我假设你的意思是反对在行上垂直对齐项目，因为你的代码已经在那里做了（https://jsfiddle.net/BradChelly/1dqLjz0o/）

如果想要换行符，可以使用<br>标记，使用边距对齐

＆＃13;

label {
  margin-left: 10px;
}
input[type="password"] {
  margin-left: 10px;
  background: #ccc;
  height: 35px;
  font-style: normal;
  font-size: 14px;
  border: 0;
}

input[type="submit"] {
  margin-left: 10px;
  display: inline-block;
  text-decoration: none !important;
  color: #fff;
  background: #000;
  font-size: 10px;
  line-height: 1.7;
  padding: 9px 29px;
  position: relative;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  border: none;
  font-weight: normal;
  letter-spacing: 2px;
}

＆＃13;

<p>
  <label for="pwbox-59">Password: <br>
    <input name="post_password" id="pwbox-59" type="password" size="20">
  </label> <br>
  <input type="submit" name="Submit" value="Enter">
</p>

＆＃13;

如何使用CSS对齐标签和输入

3 个答案: