Linken und der Mitte ausrichten beide in der gleichen Klasse

Ich versuche Matter im HTML machen zu left align und Index zu sein Zentrum ausrichten, muss ich schreiben eine andere CSS-Klasse und gelten für Index oder es ist eine Möglichkeit, diesLinken und der Mitte ausrichten beide in der gleichen Klasse

in der gleichen page-title Klasse zu verwalten

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

Quelle

2017-03-17 user580950

den Du ausgerichtet bekommen müssen zwei Elemente haben, da dies nicht mit einem einzelnen Element möglich ist (CSS-Pseudoelemente sperren). – j08691

Ja, ich denke, sie müssen in separaten Elementen innerhalb von '.page-title' liegen - afaik, das ist nicht möglich - ich wäre erstaunt, wenn es wäre! –

Nun können Sie es mit einem kleinen Trick tun, wie folgt:

Fügen :after und :before Elemente text-align:justify zu verwenden und die Wörter wie „drei“ Säulen zu trennen.
_{Hinweis: Sie müssen einen leeren Raum Beginn des Textes}
Verwenden direction hinzuzufügen, um das zweite Wort zum Zentrum

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

Quelle

2017-03-17 16:52:48 DaniP

Dies verursacht eine zusätzliche Leerzeile (Leerzeichen) unter dem Text. Technisch ist die letzte Zeile eines Absatzes niemals gerechtfertigt (wenn es nur eine Zeile gibt, ist es die letzte Zeile, die nicht gerechtfertigt ist). Sie haben dem Absatz grundsätzlich eine weitere Zeile hinzugefügt, so dass der sichtbare Text zwar gerechtfertigt ist, die nicht sichtbare zusätzliche Zeile (Leerzeichen) jedoch nicht. –

@NawedKhan Nun, du musst einen Preis zahlen, wenn du mit dem Teufel XD paktierst .... Dieser zusätzliche Raum jetzt müssen wir es lösen – DaniP

Awesome Trick. Kannst du es erklären, wie du es gemacht hast? –

Ja Sie sie trennen müssen. Unten sehen Sie, dass die Materie in separater Spannweite ist und links schwebt. Der Index befindet sich im übergeordneten Div und im ausgerichteten Mittelpunkt.

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

Quelle

2017-03-17 16:51:58

Linken und der Mitte ausrichten beide in der gleichen Klasse

Antwort

Verwandte Themen