vertikal Text in sich selbst ausrichten

-3

Ich habe eine h3 mit einer Höhe von 100%. Daher ist die Höhe unbekannt. Wie kann ich den Text in sich zentrieren? Für das Beispiel habe ich dem Elternteil feste Dimensionen gegeben, aber das ist nicht der Fall. Ich habe versucht, mit der vertikalen Ausrichtung, aber das funktioniert nicht, ich glaube, ich muss die display ändern, um das zu tun?vertikal Text in sich selbst ausrichten

Ich möchte nicht den Text innerhalb seiner Eltern zentrieren, ich kenne verschiedene Methoden, dies zu tun. Ich möchte wissen, ob es möglich ist, es vertikal in sich zu zentrieren. Der Text muss in beiden Dimensionen 100% sein, damit der Link das übergeordnete div füllt.

.unknowndimensions{ 
 
    height:300px; 
 
    width:300px; 
 
    } 
 
.unknowndimensions h3{ 
 
    height:100%; 
 
    width:100%; 
 
    background:#f7f700; 
 
    text-align:center; 
 
    }

<div class="unknowndimensions"> 
 
    <a href="#"><h3>Title</h3></a> 
 
</div>

Quelle

2016-09-14 Buts

Check out this: https://css-tricks.com/centering-css-complete-guide/ –

@HaydenSchiff Dies ist eine großartige Ressource Ich benutze es oft, aber die Methoden, die es verwendet, werden in diesem Beispiel nicht funktionieren. – Buts

@misterManSam Nein, das ist nicht das gleiche Problem. Dies ist kein Text innerhalb eines div. Die Lösung wird völlig anders sein. – Buts

Tabellenmethode verwenden,

.unknowndimensions{ 
 
    height:300px; 
 
    width:300px; 
 
    } 
 
.unknowndimensions a{ 
 
    display:table; 
 
    width:100%; 
 
height:100%; 
 
    } 
 
.unknowndimensions h3{ 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    background:#f7f700; 
 
    text-align:center; 
 
    }

<div class="unknowndimensions"> 
 
    <a href="#"><h3>Title</h3></a> 
 
</div>

Quelle

2016-09-14 03:25:36 link2pk

Coole Antwort, ich hatte einen hacky leeren verwendet, um den Link den Container füllen zu lassen. Ich war mir sicher, dass es einen anderen Weg geben musste. Diese Antwort passt zur Rechnung. – Buts

-2

Einfach.

Zeilenhöhe legt die Höhe der Zeile auf 100% fest, und vertikal ausgerichtet positioniert den Text in der Mitte.

Quelle

2016-09-14 03:16:06 Gauched

Dies funktioniert nicht für das Snippet oder mein aktuelles Projekt. Vielleicht kann die Zeilenhöhe nicht 100% sein? – Buts

versuchen, es anzuzeigen: Inline-Block; und legen Sie es in einem übergeordneten div, das auch angezeigt wird: Inline-Block. Halten Sie die vertikale Ausrichtung – Gauched

Zeilenhöhe: 100%; würde nur die Zeilenhöhe gleich der Textgröße machen. d. h. die normale Zeilenhöhe. – Buts

vertikal Text in sich selbst ausrichten

Antwort

Verwandte Themen