html - 中心对齐内容的问题

html - 中心对齐内容的问题,第1张

我有以下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>

最佳答案:

2 个答案:

答案 0 :(得分:3)

您可以使用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

答案 1 :(得分:0)

您可以删除.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

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复