使用多种字体大小时如何对齐 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>

删除了两者的行高
从 p 中删除了边距
为按钮的div 添加了边距*

但是，如果您仅使用div 或仅使用按钮，第 3 步会更好。

.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;
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;
padding-top: 5px;
height:50px;
width:120px;
top:25px;
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;
margin: 0;
}

<html>
<button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>

按钮有点特别，并且对它们应用了默认的中心对齐方式。您需要对div 执行相同的操作

.main-menu-button,
.main-menu-link {
box-sizing: border-box;
display: inline-flex;
flex-direction:column;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
height: 50px;
line-height: 3pt;
width: 120px;
background-color: white;
border: 1px solid green;
justify-content:center;
align-items:center;
}
p {
font-size: 8pt;
margin-bottom:0;
}

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

.wrapper {
display: flex;
}
.wrapper > * {
margin-right: 5px;
padding: 5px 10px;
}
.main-menu-button{ 
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600; 
font-size: 16pt;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;  
font-size: 16pt;
width:120px;
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;
margin: 0;
}

<html>
<div class="wrapper">
<button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</div>
</html>

这是怎么回事？

为两个元素和给定的显示添加了包装器：flex;

您不再需要内部元素的 height 属性，因为默认情况下 flex 父元素的子元素将具有相同的高度。

相关内容

最新更新

热门标签：