Question

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

Answer 1

由OP解决：

请参阅下面的vertical-align标记。

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

Answer 2

这是我用来测试的代码。对于IMG和按钮，似乎都需要“ vertical-align：middle”。

<html>
    <head>
        <style>
            div {background-color: pink;}
            button {vertical-align: middle;}
            img {vertical-align: middle;}
        </style>
    </head>
    <body>
        <div>
            <button>ABC</button>
            <button title=""><img src="anyimage.png">DEF</button>
            <button>GHI</button>
        </div>
    </body>
</html>

Answer 3

您必须将class btn的宽度增加到width: 251px;，因为在按钮内设置14px font-size，这需要超过240px，并且您已初始化200px，这会导致对齐中断。

更新宽度后，结果为： enter image description here

Answer 4

为此你可以使用display：flex

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

example here

doc here

HTML按钮垂直对齐

4 个答案: