問題與中心對齊內容

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

問題與中心對齊內容

回答

相關問題