HTML按鈕垂直對齊

以下HTML生成未對齊的按鈕，由於包裝文本，中間按鈕高於另外兩個按鈕。我怎樣才能讓他們對齊？HTML按鈕垂直對齊

<html> 
    <head> 
     <title>Status</title> 
     <style type="text/css"> 
     .btn { 
     background-color:red; 
     font:bold 14px Arial; 
     width:200; 
     height:100; 
     background-color:green; 
     } 
     </style> 
    </head> 
    <center> 
     <br> 
     <form> 
     <button type=button class=btn onClick="#">Button 1<br>None</button> 
     <button type=button class=btn onClick="#">Really Long Wrapped Button 2<br>None</button> 
     <button type=button class=btn onClick="#">Button 3<br>None</button> 
     </form> 
    </center> 
</html>

來源

2013-12-16 user3108382

所有3個按鈕似乎在Chrome/Win7的要正確對齊我。你使用的是什麼瀏覽器？你也錯過了''button'屬性的引號，不知道這是否是一個錯字... –

與Mozilla的@DrydenLong（Chrome）相同的顯示器 – Zword

Win7上的IE 11或FF 25.0.1都顯示它們未對齊。我也只是試過Chrome 31，它也沒有對齊，但不同。對於IE和FF，中間按鈕向上移動，對於Chrome，中間按鈕向下移動。 – user3108382

-1

你必須增加，因爲你設置14px的font-size的按鈕，需要超過240像素OK內BTN到width: 251px;的class的寬度，你已經初始化爲200px造成對準休息。

更新後寬度的結果是： enter image description here

來源

2013-12-16 18:36:51

由OP解決：

請參見下面的垂直對齊標記。

<style type="text/css"> 
    .btn { 
    background-color:red; 
    font:bold 14px Arial; 
    width:200; 
    height:100; 
    background-color:green; 
    vertical-align: middle; 
    } 
    </style>

來源

2015-11-01 15:34:07 usr2564301

-1

爲此，你可以使用display：彎曲

form{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
form button{ 
    flex: 1; 
}

example here

doc here

來源

2017-08-21 15:44:33

HTML按鈕垂直對齊

回答

相關問題