迷茫2017-04-17 13:36:08
Using Flexbox
is the most convenient way to deal with this problem:
* {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: darkgray;
}
.main {
width: 800px;
margin: 100px auto;
}
form {
display: flex;
flex-direction: column;
width: 100%;
height: 100px;
background-color: whitesmoke;
border: 2px solid grey;
margin: 20px auto;
}
p {
font-size: 20px;
font-family: "微软雅黑";
}
.input {
display: flex;
align-items: center;
flex: 1;
padding: 10px;
}
.input > input {
margin: 10px;
}
.input > label {
font-size: 20px;
}
ringa_lee2017-04-17 13:36:08
Two ideas
Absolute positioning
Use display: inline-block to make it have height and then adjust the line height
怪我咯2017-04-17 13:36:08
Add a CSS to <input>
:
vertical-align: middle;
If it still doesn’t align, replace middle
with a length value