html - 如何使用 css 在段落中的单词顶部和底部放置小文本？

Question

我想知道如何使用 CSS 在文本的顶部和底部放置一个词？很难用语言表达，所以我对我真正的意思做了一个粗略的想象

如您所见，“我叫 Marwan，今年 20 岁”。 part 只是网页上大字体的普通段落，uppertext 和 bottomtext 是小字体，段落中的单词会自动在它们之间留出所需的空间，以便 uppertext 和 bottomtext 始终在中间对齐。然而，该段落未对齐，根据语言是 LTR 还是 RTL。

我不知道如何才能成功实现它。任何帮助，将不胜感激。

Answer 1

这是你想要做的吗？ https://codepen.io/anon/pen/JZzMjL

我刚刚创建了一个带有 text-align: center; 的父 div，并在该 div 中为每个文本部分创建了 div。这将确保所有文本都居中。

.row-wrap {
  text-align: center;
  float: left;
  margin: 0 10px;
}

.row-middle {
  font-size: 30px;
}

<div class="row-wrap">
  <div class="row-top">uppertext1</div>
  <div class="row-middle">My</div>
  <div class="row-bottom">bottomtext1</div>
</div>

<div class="row-wrap">
  <div class="row-top">uppertext2</div>
  <div class="row-middle">Name</div>
  <div class="row-bottom">bottomtext2</div>
</div>

<div class="row-wrap">
  <div class="row-top">uppertext3</div>
  <div class="row-middle">Is</div>
  <div class="row-bottom">bottomtext3</div>
</div>

<div class="row-wrap">
  <div class="row-top">uppertext4</div>
  <div class="row-middle">Some</div>
  <div class="row-bottom">bottomtext4</div>
</div>

<div class="row-wrap">
  <div class="row-top">uppertext5</div>
  <div class="row-middle">Long Name</div>
  <div class="row-bottom">bottomtext5</div>
</div>