如何对齐的标签和输入与CSS

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

你的问题是误导性的，通过定义一个“行”排列项目水平表示。但是你说垂直。所以我假设你的意思是不在一列中。

林假设多数民众赞成你的意思是反对垂直对齐的行作为你的代码的项目已经这样做（https://jsfiddle.net/BradChelly/1dqLjz0o/）

当你想换行，使用的利润率，您可以只使用<br>标签对齐

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

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