Probleme mit Center-Ausrichtung Inhalt - html, css

Ich habe das unten stehende HTML.

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

und die unten stehende 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;
}

Hier versuche ich das Zentrum auszurichten SCHEDULE 1 Wort, es ist in der Mitte, aber es gibt etwas Neigung und das zweite div PART 1 ist genau in der Mitte. Bitte lassen Sie mich wissen, wie ich das erste Div in die Mitte bekommen kann und der rechtsbündige Text in derselben Zeile stehen muss. Wenn ich diesen nach rechts ausgerichteten Text lösche, SCHEDULE 1 erscheint genau in der Mitte.

.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>

Antworten:

Sie können es mit verwenden Position Feld in 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;
}

Bitte schauen Sie sich den Demo-Code an DEMO

Sie können entfernen .para + .align-right Löschen +

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