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按钮垂直对齐

回答

相关问题