HTML 按钮垂直对齐

标签 html css

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

最佳答案

由 OP 解决:

请参阅下面的垂直对齐标签。

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

关于HTML 按钮垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20617848/

相关文章:

html - IE有时会显示表格行边框

css - HTML/CSS : Fixed Margin & Fluid Width

带有 Flex-box 的 HTML5 2 x 2 布局

javascript - 检查图片是否可以加载

html - Windows Phone 7.5 的 IE9 支持在 HTML5 Canvas 上绘图吗?

javascript - 带有 AJAX 提交生成错误的 Webform

javascript - 多页表单javascript提交

jquery - 多个滑动开关

Python:基于绝对XPath解析HTML元素

html - 使用 mediaelement.js 播放 iPhone/iPad 的替代源