, wie der Text vertikal ausrichten Mitte

Question

http://jsfiddle.net/PZ5AZ/

Bitte teilen Sie mir machen, was Text Vertikal align Mitte .also raten Sie bitte, dass diese Probleme nicht kam in Zukunft senden tun zu machen, was kann ich tun?

Answer 1

wenn Sie den Text innerhalb des div vertikal zu zentrieren möchten und vielleicht horizontal können Sie versuchen, diese

#container{ 
position:relative; 
width:200px; 
height:300px; 
border:1px solid #CCCCCC; 
} 
#txt{ 
position:absolute; 
width:150px; 
height:50px; 
top:50%; left:50%; 
margin-top:-25px; /* 1/2 of height */ 
margin-left:-75px;/* 1/2 of width */ 
border:1px solid #FF0000; 
} 

<div id="container"> 
    <div id="txt">My Text</div> 
</div> 

Answer 2

Versuchen Sie Folgendes: padding: 0px 0px 4px 0px;

Answer 3

Fügen Sie diese Standard-Schaltfläche padding in Mozilla löschen:

button::-moz-focus-inner { 
    border:0; 
    padding-top:0; 
} 

Answer 4

Sie nicht vertikal Text außerhalb von Tabellen ausrichten können, so gibt es zwei Möglichkeiten:

Sie mit dem Polsterelement der Mutter spielen die Illusion von v-ausgerichtetem Text zu erreichen. Wie von Herrn Long illustriert.

oder

Sie die Position übergeordnete Element machen: relative; und das Kind Element absolut:

<div id='container'> 
<div id='txt'>My Text</div> 
</div> 

#container{ 
position:relative; 
} 

#txt{ 
position:absolute; left:0px; top:50%; 
margin-top:10px; /* half the height of the text element */ 
} 

/* hint: for scaling attributes use %'s */ 

Ich denke, die erste Option ist die einfachste in Ihrem Fall.

Viel Glück Bro!

W.

Answer 5

Wie zuvor war die vertikale Ausrichtung nicht wirklich auf etwas gestützt, dass keine Tabellenzelle ist. Wenn Sie nur versuchen, eine einzelne Textzeile zu zentrieren, können Sie line-height verwenden. Wenn Sie den Wert line-height auf den Wert height des Elements setzen und alle Abstände entfernen, wird der Text in der Mitte des Elements angezeigt, als ob er vertikal ausgerichtet wäre.

So auf Ihrem Beispiel wäre die folgende arbeiten (wenn Sie die Standard-Stile zuerst entfernen):

line-height:28px; 
height:28px; 
padding:0px; 

Aber wenn der Text auf mehr als eine Zeile umgebrochen wird diese Lösung nicht funktioniert, wird der Text plötzlich sehr weit auseinander kommen.

Für eine allgemeinere Lösung ist es am besten, Javascript zu verwenden, um die für das bestimmte Element erforderliche Auffüllung dynamisch zu erarbeiten.