左，中心對齊都在同一個班

我試圖讓物質在HTML是left align和指數是居中對齊，我必須寫另一個CSS類，並適用於指數或有在同page-title類左，中心對齊都在同一個班

.page-title { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 10px 10px 0; 
 
    line-height: normal; 
 
    border-bottom: 1px solid #b1b7ca; 
 
    margin-bottom: 15px; 
 
    margin-left: 10px; 
 
}

<div class="page-title">Matter Index</div>

來源

2017-03-17 user580950

你的需要有兩個元素，因爲你不能使用單個元素來執行此操作（禁止使用CSS僞元素）。 – j08691

是的，我認爲他們需要在'.page-title'內獨立的元素 - afaik這是不可能的 - 如果是它，我會感到驚訝！ –

那麼你可以用這樣一個小竅門做到這一點：

包括:after和:before元素使用text-align:justify和分離的話，如「三」欄。
_{注意：您需要在添加一個空格的開始你的文字}
使用direction獲得第二個字居中對齊

.page-title { 
 
    padding: 10px 10px 0; 
 
    line-height: normal; 
 
    border-bottom: 1px solid #b1b7ca; 
 
    margin-bottom: 15px; 
 
    margin-left: 10px; 
 
    text-align: justify; 
 
    direction:rtl; 
 
} 
 

 
.page-title:before, 
 
.page-title:after { 
 
    content: " "; 
 
    display: inline-block; 
 
} 
 
.page-title:after { 
 
    width: 100%; 
 
}

<div class="page-title"> Matter Index</div>

來源

2017-03-17 16:52:48 DaniP

這會導致文本下的多餘空行（空格）。從技術上講，段落的最後一行是沒有道理的（如果只有一行，它是最後一行，因此不合理）。你基本上在段落中添加了另一行，所以可見文本是合理的，但不可見的額外行（空格）不是。 –

@NawedKhan當你與惡魔XD達成協議時，你必須付出一些代價....現在我們需要額外的空間來解決它 – DaniP

真棒技巧。你能解釋一下你是如何做到的嗎？ –

是的，你必須把它們分開的方式來管理這個。在下面你會看到Matter在分隔線上並向左浮動。索引在父級Div中對齊。

.page-title { 
    float: left; 
    text-align:center; 
    width: 100%; 
    padding: 10px 10px 0; 
    line-height: normal; 
    border-bottom: 1px solid #b1b7ca; 
    margin-bottom: 15px; 
    margin-left: 10px; 
} 

.page-title span {float:left;} 

<div class="page-title"><span>Matter</span>Index</div>

來源

2017-03-17 16:51:58

左，中心對齊都在同一個班

回答

相關問題