Html 如何在相邻块中底部对齐不同字体大小的文本？

我在相邻的块中有字体大小不同的文本，但我希望这两个块中的文本彼此底部对齐。更具体地说，我希望

部分

垂直居中于

标题

，但我希望

h1

和

nav

中的文本的底边对齐。我可以调整页边距或绝对位置，使第二个块的文本与第一个块对齐，但一旦缩放页面，对齐就会中断。我有一个密码，下面是密码：

HTML:

---

想法？这似乎是一个常见的需求，但我没有找到它。

如果您将

和

都设置为

显示：内联块

您将获得默认的

垂直对齐：基线（默认情况下），它将完全按照您的需要对齐元素的文本：

否则，如果将某个元素设置为
位置：绝对
，则将其从其自然流中移除，您所能做的只是近似：

header section nav { 
  position:absolute; 
  right:0; 
  line-height:3.1em;      /* added */
  /*text-align:right;   not needed */
}

使用css转换将有所帮助。
这是一个JSFIDLE


标题{
宽度：100%；
背景色：#ddd；
}
标题部分{
宽度：80%；
最大宽度：680px；
保证金：0自动；
位置：相对位置；
}
收割台部分h1，收割台部分导航
{ 
保证金：20px 0 20px 0；
显示：内联块；
}
收割台区段h1、收割台区段导航、收割台区段导航李a
{
高度：2米；
}
标题部分h1{
字号：2em；
}
标题部分导航{
位置：绝对位置；
右：0；
文本对齐：右对齐；
}
导航ul{边距：0；填充：0；}
nav li{
显示：块；
位置：相对位置；
浮动：左；
}
nav li a{
左边距：2米；
文字装饰：无；
显示：块；
转换：翻译（0%，50%）；
-webkit转换：翻译（0%，50%）；
-moz变换：平移（0%，50%）；
-o变换：平移（0%，50%）；
}
正文{margin:0；字体系列：无衬线；}

站点名称






您不希望所有的（h1和链接）都位于节的中心（垂直方向）？我希望
节在
标题中垂直居中，但我希望
h1
和
nav
中的文本的底边对齐。@mix决定您想要什么。请求（如果您对px perfect很挑剔）不一样。请使用行距将文本精确移动到节
标题节h1，标题节nav{margin:20px 0 20px 0；display:inline block；行距：40px；}
@RokoC.Buljan我不确定您在说什么（我不想自相矛盾）。我希望
部分垂直居中（它的高度由它包含的两个元素中的最大元素决定——在我的例子中是
h1
），然后我希望两个元素中的文本显示为底部对齐（以便最小高度元素中的文本与最大元素对齐）@AdityaShedge我尝试了行高，但这会使文本沿垂直中心对齐，而不是垂直底部对齐。很好。3.15em看起来更精确一点，但它在正常的缩放下表现良好。然而，至少在Chrome中，它在某些缩放级别上失败了。也许可以接受，但并不理想。在这个代码笔中，我将宽度设置得太窄，因此您可以很容易地看到对齐@mix Yes，3.15只是一个最佳匹配，因为您无法将其设置为“位置：绝对”，并希望它遵循自然对齐，因为它无法流动。在中，您可以看到一个示例，其中未使用position:absolute，而是将元素设置为
inline block
，默认情况下，它们遵循正确的对齐指令，这是您努力实现的目标（这可能最适合我的答案，但不确定是否符合您的确切要求），感谢您的澄清。我确实希望
nav
与
标题的右边缘齐平，这就是我使用
绝对
的原因。我可以使用
inline block
在
h1
和
nav
上设置宽度，并在
nav
上设置
text align:right
，然后布局在较小的缩放尺寸下中断。
header { width:100%; background-color:#ddd; }

header section {
  width:80%;
  max-width:980px;
  margin:0 auto;
  position:relative;
}

header section h1, header section nav { 
  margin:20px 0 20px 0;
  display:inline-block;
}

header section h1 { font-size:2em; }

header section nav { 
  position:absolute; 
  right:0; 
  text-align:right; 
}

nav ul { margin:0; padding:0;}
nav li { display:inline; }
nav li a { margin-left:2em; text-decoration:none; }
body { margin:0; font-family:sans-serif; }

header section nav { 
  position:absolute; 
  right:0; 
  line-height:3.1em;      /* added */
  /*text-align:right;   not needed */
}