问题与中心对齐内容

我有下面的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>

来源

2015-09-25 user3872094

现在你可以看到我的回答，请先生 –

请立即检查我的答案 –

你能做到这一点，在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

来源

2015-09-25 10:22:39

嗨，有没有没有使用位置的方式，因为我的工具不接受'位置' – user3872094

由于我的工具不接受位置？ – lharby

@ user3872094你是什么意思“我的工具不接受位置”？你使用什么工具？ –

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

来源

2015-09-25 10:18:11

问题与中心对齐内容

回答

相关问题