使用多种字体大小时如何对齐div和按钮?

我需要有一个用于激活下拉菜单的按钮,以及一个在其中具有链接的div,在导航栏中,该按钮和链接在其下方具有名称和一小行文本。我希望一小段文字是较小的字体。如果将一行文本放在p标记中并指定较小的字体,则无法使文本整齐地对齐它们。

我可以在链接上使用填充来将其下推,但是当我开始使用媒体查询来缩小尺寸时,它们就无法对齐。我也尝试过使用线高,但是有类似的问题。我可以通过所有媒体查询来略微调整填充/行高以获取对齐,但是显然这不能解决问题,只是创建一个混乱的解决方案。

如果我删除了一行文字的字体大小,它们将正确对齐。有人可以帮我理解为什么使用不同字体大小会导致按钮和div中文本的对齐方式发生不同的变化并提出解决方案的原因,并提出解决方案,以便在我调整其他属性(例如两者的高度)的大小时轻松一致地对齐。谢谢

.main-menu-button{ 
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  float:left;
  position:relative;
  font-weight: 600; 
  font-size: 16pt;
  height:50px;
  top:25px;
  line-height: 3pt;  
  z-index:10;
  background-color: white;
  border: 1px solid green;
}

.main-menu-link{
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  float: left;
  position:relative;
  font-weight: 600;  
  font-size: 16pt;

  height:50px;
  width:120px;
  top:25px;

  line-height: 3pt;
  z-index:10;
  text-align: center;
  border:solid 1px black;
}

/* if you remove font size in the p tag, the text aligns, but I want this below*/

p {
  font-size:8pt;
}
<html>
    <button class="main-menu-button">My button<p>bit of text</p></button>
    <div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>
评论