2013-12-16 209 views
2

以下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> 
+1

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

+1

與Mozilla的@DrydenLong(Chrome)相同的顯示器 – Zword

+0

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

1

由OP解決:

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

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

爲此,你可以使用display:彎曲

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

example here

doc here