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

Question

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

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

Answer 1

要应用 vertical-align 属性，元素需要有 display: inline-block。我在下面的代码片段中添加了它，但我重新组织了 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>

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

Align different font-sizes on same baseline

html

css

font-size