Wie zentriert man Text in einem Div-Element?

Question

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

<div class="w1h1 medium"> 
    <a class="userLink" target="_blank" href="Fancybox.aspx"> 
     <table style="width: 100%; height: 100%"> 
      <tr style="vertical-align: central"> 
       <td style="text-align: center; font-weight: bold;"> 
        text in the middle 
       </td> 
      </tr> 
     </table> 
    </a> 
</div> 

Und das ist mein CSS:

div.w1h1 { 
    width: 150px; 
    height: 150px; 
} 

.medium { 
    background-color: #06849b; 
    color: white; 
    font-family: sans-serif; 
} 

a.userLink 
{ 
    width: 150px; 
    height: 150px; 
    display: table; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

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

ich gerade erstellt Spielplatz hier: http://jsfiddle.net/Tschareck/yfnnm/

Answer 1

Sie könnten Ihre Struktur ein wenig, vereinfachen und display:table-cell auf dem a Element verwenden.

html

<div class="w1h1 medium"> 
    <a class="userLink" target="_blank" href="Fancybox.aspx"> 
     text in the middle 
    </a> 
</div> 

css

div.w1h1 { 
    width: 150px; 
    height: 150px; 
    font-family:sans-serif; 
    background-color: #06849b; 
} 
a.userLink { 
    width: 150px; 
    height: 150px; 
    display: table-cell; 
    vertical-align:middle; 
    text-align:center; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

Demo beihttp://jsfiddle.net/yWLYV/1/

arbeitet bis auf IE8

Answer 2

ändern <tr style="vertical-align: central">-<tr style="vertical-align: middle"> und a.userLink Eigenschaft display-inline-block oder inline.

jsfiddle

Answer 3

meine Technik versuchen; folgen Sie diesem

.outer{ float:left; width:100px; height:100px; background-color:#ccc; } 
.innet{ float:left; width:100%; line-height:100px; text-align:center; } 

<div class="outer"> 
     <span class="inner">This is my text</span> 
</div> 

und Morpheus alles in Ordnung! ;)

Answer 4

Versuchen Sie mit: line-height: 150px, um die Höhe des Inhalts in der Box festzulegen. Dies sollte gut funktionieren, wenn nur eine einzige Zeile Inhalt vorhanden ist.

Answer 5

Verwenden valign="middle" im <td>

Beispiel:

<td style="text-align: center; font-weight: bold;" valign="middle"> 
    text in the middle 
</td> 

Answer 6

Versuchen Sie dieses:

HTML:

<a href="#">Text here</a> 

CSS:

a { 
    display: block; 
    width: 150px; 
    height: 150px; 
    background-color: #06849b; 
    color: white; 
    font-family: sans-serif; 
    vertical-align: middle; 
    line-height: 150px; 
    text-align: center; 
    text-decoration: none; 
    font-weight: bold; 
} 

Und ein demo.

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

EDIT, um eine bessere Lösung gefunden, zeigen Sie den Anker als Tabellenzelle, funktioniert auch mehrzeilige:

a { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: 150px; 
    height: 150px; 
    background-color: #06849b; 
    color: white; 
    font-family: sans-serif; 
    text-decoration: none; 
    font-weight: bold; 
} 

Updated fiddle

Answer 7

Eine gute Möglichkeit, perfekt zentriert Text zu erhalten, ist ein Flexbox Layout zu verwenden . Sie können horizontal und vertikal zentriert den Inhalt eines Containerelement mit sehr wenig Code:

.container-with-centered-content { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Demo: http://jsfiddle.net/913fch6v/