html - 如何将多行按钮与其中的不同文本对齐？

我正在尝试重新创建 Microsoft Windows 10 计算器(查看以供引用)。我无法对齐所有按钮，因为按钮包含不同的字母和符号。我希望所有按钮的大小完全相同，并且彼此相邻，中间没有空格。

此外，在发布此消息时，我注意到我的显示器更加向右突出。有修复的想法吗？

链接到 HTML 和 CSS 组合: https://codepen.io/anon/pen/jpLOjP

HTML:

<body>
  <form id="calculatorForm">
    <input type="text" id="display">
    <div class="row">
      <!--percent-->
      <button type="button" onclick="calculate()">&#37;</button>
      <!--sq root-->
      <button type="button" onclick="calculate()">&radic;</button>
      <!--x^2-->
      <button type="button" onclick="calculate()">x&sup2;</button>
      <!--1/x-->
      <button type="button" onclick="calculate()">&sup1;&frasl;<sub>x</sub></button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">CE</button>
      <button type="button" onclick="reset()">C</button>
      <!-- remove -->
      <button type="button" onclick="calculate()">&#8653;</button>
      <button type="button" onclick="calculate()">&divide;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">7</button>
      <button type="button" onclick="calculate()">8</button>
      <button type="button" onclick="calculate()">9</button>
      <button type="button" onclick="calculate()">&times;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">4</button>
      <button type="button" onclick="calculate()">5</button>
      <button type="button" onclick="calculate()">6</button>
      <button type="button" onclick="calculate()">&minus;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">1</button>
      <button type="button" onclick="calculate()">2</button>
      <button type="button" onclick="calculate()">3</button>
      <button type="button" onclick="calculate()">&plus;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">&plusmn;</button>
      <button type="button" onclick="calculate()">0</button>
      <button type="button" onclick="calculate()">&sdot;</button>
      <button type="button" onclick="calculate()">&equals;</button>
    </div>
  </form>
</body>

CSS:

#display {
  font-size: 90px;
  width: 100%;
}

form {
  background: #eee;
  border: solid grey;
  display: block;
  margin: 0 auto;
  width: 450px;
  padding: 10px;
}

.row {
  font-size: 0px;
  text-align: center;
  margin: 0 auto;
}

.row button {
  width: 25%;
  height: 60px;
  font-size: 40px;
  font-family: calibri;
}

最佳答案

您正在寻找vertical-align。

.row button{
    vertical-align: middle;
}

关于html - 如何将多行按钮与其中的不同文本对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51525835/

html - 如何将多行按钮与其中的不同文本对齐？

上一篇：jquery - 如何使我的网站在大屏幕上看起来更好？

下一篇：c# - 隐藏或删除下拉列表中的重复选项