Html 如何将 元素与常规文本垂直对齐

body {
  font-family:"Times New Roman";
  }
ruby {
  font-family:"Times New Roman";
    display: inline-flex;
    flex-direction: column-reverse ;
    align-items: center;
  }
rt {
  font-family:"Arial Narrow";
  }

Mat 1:1 <RUBY><ruby><ruby>Βίβλος<rt>βίβλος</rt></ruby><rt>[The] book</rt></ruby><rt>N-NSF</rt></RUBY> <RUBY><ruby><ruby>γενέσεως<rt>γένεσις</rt></ruby><rt>of [the] genealogy</rt></ruby><rt>N-GSF</rt></RUBY> <RUBY><ruby><ruby>Ἰησοῦ<rt>Ἰησοῦς</rt></ruby><rt>of Jesus</rt></ruby><rt>N-GSM</rt></RUBY> <RUBY><ruby><ruby>Χριστοῦ<rt>Χριστός</rt></ruby><rt>Christ</rt></ruby><rt>N-GSM</rt></RUBY> 

body {
  font-family: "Times New Roman";
}

.interlinear {
  display: flex;
  align-items: flex-end;
  font-family: "Times New Roman";
}

.ruby {
  display: inline-block;
  position: relative;
}

.rt {
  display: block;
  font-family: "Arial Narrow";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}




<div class="interlinear">
  <div class="ruby">Mat 1:1</div>
  <ruby>
    Βίβλος<rt>βίβλος</rt>
  </ruby>
  <!-- Add more <ruby> elements here as needed -->
</div>

Html相关问答推荐

在Apps Script中连接CSS与HTML

如何在html和css中创建动态调整大小的表元素

为什么我的搜索栏会出现在WONG位置？

如何在所有屏幕大小下使带有背景图像的伪元素作为标题的衬底？

MatSnackBar： colored颜色 不起作用

天使17：令人惊叹的动画

当溢出到滚动条中时， bootstrap 按钮样式会更改

风格规则应该适用于响应图像的哪些方面？哪种规则适用于<；图片和gt；，哪种规则适用于<；img>；？

在每个列宽由带有固定值的minmax()函数定义的网格中，CSS如何为列分配空间？

使用CSS Flexbox时，我的图像未对齐

文本幻灯片显示动画

将精选选项的价格合并为一个价格HTML、PHP和JQuery

如何使链接组件内的内容不重新路由Next.js13

`table>；的消失；tbody：nth子级(1)`HTML

div 中的垂直中心表格

一旦大于最大限制，JQuery 取消 Select 复选框

在DIV上应用梯度模糊未如预期工作

th 内的 div 标签没有占据全高

提交前的验证表单未显示任何验证消息？

使用 CSS 样式化进度条