同一行上具有不同大小的文本，如何将较小的文本水平居中与较大的文本对齐？

Question

如上图所示（请不要注意Dasboard文本非常大的事实 - 我只为这个例子制作了那个大小），我想要的文字是＆＃34; Admin Control Panel＆＃34 ;在水平方向中间与仪表板文本的位置对齐，在线使用红色箭头。

我对这两段文字的代码是：

<div id="content-breadcrumb">
  Admin Control Panel &raquo;
    <span id="active">
      Dashboard
    </span>
</div>

CSS代码是：

#content-breadcrumb {
  font-family: 'Varela Round', sans-serif
  font-size: 16px;
}

#content-breadcrumb #active {
  font-size: 200px;
  color: #4F95C4;
}

请注意，我尝试使用垂直对齐和设置线高无效。感谢您提供的任何帮助！

Answer 1

您可以使用弹性框和align-items来完成此任务：

（PS：您的结束div和​​span标签缺少正确的插入符号）

#content-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
  
#active {
    font-size: 2rem;
}
  

<div id="content-breadcrumb">
  Admin Control Panel &raquo;
    <span id="active">
      Dashboard
    </span>
</div>

Answer 2

如果您不想使用flex-box，可以使用vertical-align: middle;。

https://jsfiddle.net/yrduwpzm/

＆＃13;

＆＃13;

#content-breadcrumb {
  font-family: 'Varela Round', sans-serif
  font-size: 16px;
}

#content-breadcrumb #active {
  font-size: 50px;
  color: #4F95C4;
  vertical-align: middle; 
}

＆＃13;

<div id="content-breadcrumb">
  Admin Control Panel &raquo;
    <span id="active">
      Dashboard
    </span>
</div>

＆＃13;

＆＃13;

＆＃13;