在同一基线上对齐不同的字体大小答案

【问题标题】：Align different font-sizes on same baseline在同一基线上对齐不同的字体大小
【发布时间】：2018-07-04 05:30:14
【问题描述】：

我想在同一基线上对齐具有不同字体大小的文本。

“LOREM IPSUM SED”应与“SEA TAKIMATA SANCTUS EST LoReM Ip”在同一行，并与“SED NONUMY INVIDUNT UT”和“nO Sea TaKiMaTa sAnCtUs eSt”相同

我已经试过了，但是没有用：

Aligning different font sizes on the same line of text so it looks nice?

How to vertically align 2 different sizes of text?

这是我当前的代码：

html, body{
  width: 100%;
  height:100%;
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.clearfix::after{
	content:"";
	clear:both;
	display: block;
}

.entire-page{
  margin: 0 5%;
}


.header-content > div{
  width:100%;
  padding: 30px 0;
}

.left{
  float:left;
}
.right{
 float: right;
}

.margin-right-header{
  margin-right: 30px;
}

.left-top{
  font-size:1.5rem;
  font-weight:300;
  color:#ff0000;
}

.left-top > span > span{
  font-weight:400;
}

.left-bottom > span{
  font-size:0.5rem;
  font-weight:400;
  color:#999;
}

.left-bottom > span > span{
  font-weight:400;
}

.right-top{
  font-size:1rem;
  font-weight:300;
  color:#ff0000;
}

.right-bottom{
  font-size:1rem;
  font-weight:300;
  color:#999;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
  </head>
  <body>
  
	<div class="entire-page">

		<header class="clearfix">
			<div>
	  
				<div class="left">
				  <div class="left-top"><span><span>LOREM IPSUM</span> SED</span></div>
				  <div class="left-bottom"><span style="vertical-align:baseline;">SED <span>NONUMY</span> INVIDUNT UT</span></div>
				</div>

				<div class="right margin-right-header">
				  <div class="right-top"><span>sEa tAkImAtA SaNcTuS EsT LoReM Ip</span></div>
				  <div class="right-bottom"><span style="vertical-align:baseline;">nO SeA TaKiMaTa sAnCtUs eSt</span></div>
				</div>
		
			</div>
		</header>
	
	</div>

  </body>
</html>

【问题讨论】：

请编辑您的问题以包含以下内容：我想要，“LOREM IPSUM SED”与“sEa tAkImAtA SaNcTuS EsT LoReM Ip”在同一行，与“SED NONUMY INVIDUNT UT”相同”和“nO Sea TaKiMaTa sAnCtUs eSt”。我现在将编辑我的答案。
@Ivan86 你会编辑你的答案还是你认识知道答案的人？
另一种无需对 CSS 进行硬编码的方法是“测量”特定字体并生成正确的行高等。但这非常复杂。见stackoverflow.com/questions/48451054/…

标签： html css font-size

【解决方案1】：

要应用vertical-align 属性，元素需要具有display: inline-block。我在下面的 sn-p 中添加了它，但是我重新组织了 HTML 结构，以便对齐的元素在同一个父元素内。

顺便说一句，vertical-align: baseline 是 display: inline-block 的默认值，因此您甚至不需要编写它 - 单独使用 display: inline-block 就足够了。

html,
body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 1rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.left-top {
  font-size: 1.5rem;
  font-weight: 300;
  color: #ff0000;
}
.left-top>span>span {
  font-weight: 400;
}
.left-bottom>span {
  font-size: 0.5rem;
  font-weight: 400;
  color: #999;
}
.left-bottom>span>span {
  font-weight: 400;
}
.right-top {
  font-size: 1rem;
  font-weight: 300;
  color: #ff0000;
}
.right-bottom {
  font-size: 1rem;
  font-weight: 300;
  color: #999;
}
.top,
.bottom {
  width: 100%;
}
.top>*,
.bottom>* {
  display: inline-block;
  width: 46%;
}

<div class="entire-page">
  <header class="clearfix">
    <div class="top">
      <div class="left-top">
        <span><span>LOREM IPSUM</span> SED</span>
      </div>
      <div class="right-top">
        <span>sEa tAkImAtA SaNcTuS EsT LoReM Ip</span>
      </div>
    </div>
    <div class="bottom">
      <div class="left-bottom">
        <span>SED <span>NONUMY</span> INVIDUNT UT</span>
      </div>
      <div class="right-bottom">
        <span>nO SeA TaKiMaTa sAnCtUs eSt</span></div>
    </div>
  </header>
</div>

【讨论】：

感谢您的回复。但是文本的格式现在已经消失了。
"sEa tAkImAta SaNcTuS EsT LoReM Ip" 和 "nO Sea TaKiMaTa sAnCtUs eSt" 应该在同一垂直线上的右侧
请注意我更改的答案
你有空可以看看吗？ stackoverflow.com/questions/48511266/…
对于任何可能寻找 flex-box 解决方案的人：align-items: baseline; 可能会帮助您。它只是帮助我将具有不同字体大小的元素对齐在同一基线上。