小编sha*_*dar的帖子

我想让我的 div2 居中对齐，div3 位于右侧。

我尝试使用文本对齐：主 div 的中心并使浮动向右到 div3 来做到这一点，但它通过考虑主 div 的剩余部分来使其居中对齐。我已经给主 div 赋予了 display: inline-flex

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">

<div style="height: 20px;width:20px;background-color: red;">
  Hello
</div>

<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>

这是我的HTML和CSS-

<style>
.bottom-border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  color: #999;
  margin-top: 0.1%;
  margin-bottom: 1.5%;
}
.subheading {
  position: relative;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
  clear: both;
  color: #666666;
  z-index: 1000;
}
h1 {
  text-align: center;
  margin-bottom: -0.4em;
}
</style>
<div class="bottom-border">
   <h1><span class="subheading" >Hello World</span></h1>
</div>

我希望我的文字看起来像 -

目前的结果是 -

我可以通过将背景颜色设置为跨度的白色来实现预期的但我想知道其他方式,因为它不是理想的方式.