Dynamisch Rand auf vertikal zentrierten Inhalt setzen

Ich habe eher eine verwirrende Situation in meinem Layout. Wie ich unten angehängt habe, zeigt das Design Text, der doppelt gefüttert und einfach ausgekleidet ist. Ich setze einen Rand auf einzelne gesäumte Texte, damit er ausgerichtet wird. Wenn es einen doppelt linierten Text gibt, muss ich den Rand manuell einstellen. Ist es möglich, dies ohne JavaScript-Funktion zu setzen? Könnte es Konus mit reinem CSS sein, ohne bestimmte Ränder für jeden Texttyp zu haben.Dynamisch Rand auf vertikal zentrierten Inhalt setzen

Meine div Struktur ist wie folgt.

<div class="operation text-center"> 
    <i class="icon fw fw-ringing fw-3x"></i> 
    <span>Ring</span> 
</div>

Quelle

2017-05-04 Imesh Chandrasiri

Dies kann Hilfe- http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css – Ninjaneer

@Mendax: Das ausrichtet 1 Zeile Text in der Mitte, TS fragt, wie man sowohl Einzel- als auch Doppelstrich Situation gemischt – Martijn

PS: Dieser Pinsel ist keine sehr gute Wahl für 'Passwort löschen' – Martijn

Ja, eher zu einfach line-height und Höhe mit:

.operation .itemText{ 
    line-height: 15px; 
    height: 30px; /* at least twice the line-height */ 
} 

<div class="operation text-center"> 
    <i class="icon fw fw-ringing fw-3x"></i> 
    <span class="itemText">Ring</span> 
</div>

Der Trick einen Platz für den Text auf die Höhe von zwei Linien definiert wird. Die kleinen formulierten Wörter nehmen immer noch zwei Zeilen ein, füllen aber nur einen Text aus.

Alternativ könnten Sie das ganze .operation eine Min-Höhe geben, aber ich bevorzuge es nicht, da mobile Reaktionsfähigkeit schwieriger wird, je mehr Sie Höhen definieren.

Quelle

2017-05-04 07:54:11 Martijn

Das funktioniert wie ein Zauber! :) –

Was ist, wenn es 3 Zeilen gibt? Ob das funktioniert? – Ninjaneer

Es tut, wenn Sie die Höhe 3 mal die Zeilenhöhe machen. – Martijn

Mit CSS Flexbox benötigen Sie keine bestimmte Höhe, es wird trotzdem ausgerichtet, mit margin: auto 0, und es spielt keine Rolle, wie viele Zeilen Sie haben.

.wrapper { 
 
    display: flex; 
 
} 
 
.operation { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.operation .itemText { 
 
    margin: auto 0; 
 
} 
 

 

 
/* styles added for this demo */ 
 
.wrapper { margin-bottom: 20px; } 
 
.operation { padding: 10px; }

<div class="wrapper"> 
 
    <div class="operation text-center"> 
 
    <i class="icon fw fw-ringing fw-3x">icon</i> 
 
    <span class="itemText">Ring</span> 
 
    </div> 
 
    <div class="operation text-center"> 
 
    <i class="icon fw fw-ringing fw-3x">icon</i> 
 
    <span class="itemText">Ring<br>2 lines</span> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="operation text-center"> 
 
    <i class="icon fw fw-ringing fw-3x">icon</i> 
 
    <span class="itemText">Ring<br>3<br>lines</span> 
 
    </div> 
 
    <div class="operation text-center"> 
 
    <i class="icon fw fw-ringing fw-3x">icon</i> 
 
    <span class="itemText">Ring</span> 
 
    </div> 
 
</div>

Quelle

2017-05-04 08:22:11 LGSon

Dynamisch Rand auf vertikal zentrierten Inhalt setzen

Antwort

Verwandte Themen