我想知道如何使用 CSS 在文本的顶部和底部放置一个词?很难用语言表达,所以我对我真正的意思做了一个粗略的想象
如您所见,“我叫 Marwan,今年 20 岁”。 part 只是网页上大字体的普通段落,uppertext 和 bottomtext 是小字体,段落中的单词会自动在它们之间留出所需的空间,以便 uppertext 和 bottomtext 始终在中间对齐。然而,该段落未对齐,根据语言是 LTR 还是 RTL。
我不知道如何才能成功实现它。任何帮助,将不胜感激。
最佳答案
这是你想要做的吗? 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>
关于html - 如何使用 css 在段落中的单词顶部和底部放置小文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51144567/