Wie zentriert man Text in einem div-Element?

7

Ich versuche ein quadratisches Element zu erstellen, das sowohl vertikal als auch horizontal zentriert sein soll. Zusätzlich sollte der gesamte Bereich des Platzes eine Verbindung sein. Das ist mein HTML:

%Vor%

Und das ist mein CSS:

%Vor%

Es funktioniert in Chrome und Firefox, aber nicht im Internet Explorer. Im IE befindet sich der Text an der Spitze des Quadrats, nicht in der Mitte. Kannst du mir dabei helfen?

Ich habe gerade einen Spielplatz hier geschaffen: Ссылка

    
Tschareck 09.10.2013, 13:44
quelle

7 Antworten

18

Sie könnten Ihre Struktur ein wenig vereinfachen und display:table-cell für das Element a verwenden.

html

%Vor%

css

%Vor%

Demo bei Ссылка

funktioniert bis IE8

    
Gaby aka G. Petrioli 09.10.2013, 13:57
quelle
9

Eine gute Möglichkeit, perfekt zentrierten Text zu erhalten, ist die Verwendung eines Flexbox-Layouts. Sie können den Inhalt eines Containerelements mit sehr wenig Code horizontal und vertikal zentrieren:

%Vor%

Demo: Ссылка

    
bromy 05.09.2015 21:48
quelle
1

Ändern Sie <tr style="vertical-align: central"> in <tr style="vertical-align: middle"> und a.userLink property display in inline-block oder inline .

jsfiddle

    
Morpheus 09.10.2013 13:49
quelle
1

probiere meine Technik aus; Folge diesem

%Vor%

und Morpheus in Ordnung! ;)

    
avalkab 09.10.2013 13:50
quelle
1

Verwenden Sie: line-height: 150px , um die Höhe des Inhalts innerhalb der Box festzulegen. Dies sollte gut funktionieren, wenn es nur eine einzige Zeile mit Inhalt gibt.

    
acairns 09.10.2013 13:50
quelle
1

Versuchen Sie Folgendes:

HTML:

%Vor%

CSS:

%Vor%

Und eine Demo .

Bitte beachten Sie, dass es nur eine Textzeile erlaubt ... ist das ein Problem?

BEARBEITEN, eine bessere Lösung gefunden, den Anker als Tabellenzelle anzeigen, auch mehrere Zeilen:

%Vor%

Geige aktualisiert

    
LinkinTED 09.10.2013 14:05
quelle
0

Verwende valign="middle" in <td>

Beispiel:

%Vor%     
SKeurentjes 09.10.2013 13:51
quelle

Tags und Links