html - 中心对齐内容的问题

Question

我有以下 HTML。

<div class="para align-center">SCHEDULE 1 <span class="align-right">[r.32]</span></div>
<div class="para align-center">PART I</div>

和下面的 CSS

.para {
  text-indent: 0em;
  margin-bottom: 0.85em;
}
.para + .align-right {
  margin-top: 1.2em;
}
.align-center {
  text-align: center;
}
div.align-center span.align-right {
  float: right;
}

这里我试图居中对齐 SCHEDULE 1 单词，它在中心但有一些左倾，第二个 div PART 1 在精确的中心。请让我知道如何让第一个 div 居中并且右对齐的文本必须在同一行的右边。当我删除右对齐的文本时，SCHEDULE 1 出现在正中央。

.para {
  text-indent: 0em;
  margin-bottom: 0.85em;
}
.para + .align-right {
  margin-top: 1.2em;
}
.align-center {
  text-align: center;
}
div.align-center span.align-right {
  float: right;
}

<div class="para align-center">SCHEDULE 1 <span class="align-right">[r.32]</span>
</div>
<div class="para align-center">PART I</div>

Answer 1

您可以使用 position 来做到这一点CSS 中的字段

HTML:

    <div class="para align-center">SCHEDULE 1 <span class="align-right">[r.32]</span>
</div>
<div class="para align-center">PART I</div>

CSS:

.para {
  text-indent: 0em;
  margin-bottom: 0.85em;
}
.align-center {
  text-align: center;
}
div{
    position: relative;
}
div.align-center span.align-right {
  float: right;
}

div span.align-right{
    position: absolute;
    right: 0;
}

请看演示代码 DEMO