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

您可以使用CSS

中的position字段来完成此操作

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

Answer 2

您可以删除.para + .align-right删除+

Css:

.para {
  text-indent: 0em;
  margin-bottom: 0.85em;

}
.align-center {
  text-align: center;

}

div.align-center span.align-right {
   float:right;
    margin-left:-38px;
}

DEMO

中心对齐内容的问题

2 个答案: