無法在一條線上對齊兩個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的垂直線

回答

相關問題