Html 使用不同字体对齐元素

.button1 {
  font-family: -apple-system, system-ui, "Segoe UI";
  height: 40vh;
  width: 60%;
  display: inline;
}

.button2 {
  font-family: Arial;
  height: 40vh;
  width: 20%;
  display: inline;
}

<button class="button1">Button 1</button>
<button class="button2">2</button>

<br><br> As you can see button 1 is aligned slightly above button 2. This only happens when the font is not the same. Below is an example where they align correctly.

<br><br>

<button class="button1">Button 1</button>
<button class="button1" style="width:30%">2</button>

.button1 {
  font-family: -apple-system, system-ui, "Segoe UI";
  height: 40vh;
  width: 60%;
  display: inline;
}

.button2 {
  font-family: Arial;
  height: 40vh;
  width: 20%;
  display: inline;
}
.buttons-wrapper{
  display: flex;
  gap:4px;
}

<div class="buttons-wrapper">
  <button class="button1">Button 1</button>
  <button class="button2">2</button>
</div>

<br><br> As you can see button 1 is aligned slightly above button 2. This only happens when the font is not the same. Below is an example where they align correctly.

<br><br>

<div class="buttons-wrapper">
  <button class="button1">Button 1</button>
  <button class="button1" style="width:30%">2</button>
</div>

Html相关问答推荐

如何只混合部分的背景而不是内容<>

让多对图像在各自的div中叠加

将表格背景图像置于行背景 colored颜色 之上

渐变进度条位置

旧文本淡出，但新文本不会淡入，而是突然出现

如何用css在右侧创建多个半圆

悬停表格单元格文本时，使元素的字体大小更大，同时保持表格单元格的高度不变

将文本保持在平行四边形内并遵循形状

Flex：第一个 div 有列，下一个 div 有行

CSS中的百分比高度，如何使其与父级高度相同

为什么可滚动弹性项目需要 flex-basis： 0 ？

如何使用CSS Select 同级元素的：：before伪元素？

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

使用 R 中的 rvest 包获取搜索结果的第一个链接

如何制作一个空的网格模板行来填充剩余空间？

如何在Bootstrap卡片底部添加波浪形状

如何为某些行具有 rowspan 的表的每个奇数行着色

如何使用 CSS 和 HTML 将文本放入图像中？

如何将我的输入值固定到 2022 年 12 月？

如何使具有两个元素的 div 行在移动设备中响应