无法在一条线上对齐两个div的垂直线

我有两个div。一个文本框和另一个按钮。我无法垂直对齐两个div。我需要文本框和按钮具有相同的高度，并在同一行垂直对齐。哪里不对？父无法在一条线上对齐两个div的垂直线

.inputHolder{ 
 
    border:1px solid #FFF; 
 
\t vertical-align:middle; 
 
} 
 
.input{ 
 
\t margin-top:150px; 
 
\t width:100px; 
 
\t height:50px; 
 
\t border:1px solid black; 
 
\t font-size:1.2em; 
 
\t padding:5px; 
 
\t display:inline-block; 
 
} 
 
.input:focus{ 
 
\t outline:0; 
 
} 
 
.goBtn{ 
 
\t height:50px; 
 
\t width:200px; 
 
\t border:1px solid black; 
 
\t display:inline-block; 
 
}

<html> 
 
<body> 
 
\t \t <div class="inputHolder"> 
 
\t \t \t <input type="text" class="input"> 
 
\t \t \t <input type="submit" value="Go" class="goBtn"> 
 
\t \t </div> 
 
</body> 
 
</html>

来源

2017-04-07 Code Whiz

显示flex会让他们在同一高度和侧方

.inputHolder { 
 
    border: 1px solid #FFF; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.input { 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    font-size: 1.2em; 
 
    padding: 5px; 
 
} 
 

 
.input:focus { 
 
    outline: 0; 
 
} 
 

 
.goBtn { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
}

<div class="inputHolder"> 
 
    <input type="text" class="input"> 
 
    <input type="submit" value="Go" class="goBtn"> 
 
</div>

来源

2017-04-07 18:12:00

悲哀地显示：flex与所有浏览器不兼容 – TriForce

@TriForce它拥有97.71％的全球浏览器支持，而OP没有列出不支持flexbox的特定浏览器作为他们发布的要求。 –

但问题是，它是对齐到屏幕的左侧，我无法居中 –

难道这是你想要sample form ？

CSS

.inputHolder { 
    border: 1px solid #FFF; 
    vertical-align: middle; 
} 

.input { 
    margin-top: 150px; 
    width: 100px; 
    height: 50px; 
    border: 1px solid black; 
    /* font-size: 1.2em; */ 
    padding: 0 5px; 
    display: inline-block; 
} 

.input:focus { 
    outline: 0; 
} 

.goBtn { 
    height: 52px; 
    width: 200px; 
    border: 1px solid black; 
    display: inline-block; 
}

HTML

<div class="inputHolder"> 
    <input type="text" class="input"> 
    <input type="submit" value="Go" class="goBtn"> 
</div>

来源

2017-04-07 18:23:15 Mark

你想做到这一点？

https://jsfiddle.net/pm3kpgL7/1/

如果你想vertical-align元素，该属性需要放置到该元素，而不是他的父母，所以我只是感动垂直对齐的输入和它的作品使用vertical-align: sub

.inputHolder{ 
    border:1px solid #FFF; 
    text-align:center; 
} 
.input{ 
    margin-top:150px; 
    width:100px; 
    height:50px; 
    border:1px solid black; 
    font-size:1.2em; 
    padding:5px; 
    display:inline-block; 
    vertical-align:sub; 
} 
.input:focus{ 
    outline:0; 
} 
.goBtn{ 
    height:50px; 
    width:200px; 
    border:1px solid black; 
    display:inline-block; 
}

来源

2017-04-07 18:27:11 TriForce

无法在一条线上对齐两个div的垂直线

回答

相关问题