Come centrare il testo in un elemento div?

Question

Sto provando a creare un elemento quadrato, che avrà il testo centrato sia verticalmente che orizzontalmente. Inoltre, l'intera area del quadrato dovrebbe essere un collegamento. Questo è il mio 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> 

E questo è il mio 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; 
} 

Funziona in Chrome e Firefox, ma non in Internet Explorer. In IE il testo è nella parte superiore del quadrato, non nel mezzo. Puoi aiutarmi con questo?

Ho appena creato un parco giochi qui: http://jsfiddle.net/Tschareck/yfnnm/

Answer 1

Si potrebbe semplificare la struttura un po ', e utilizzare display:table-cell sull'elemento a.

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 ahttp://jsfiddle.net/yWLYV/1/

lavora fino a IE8

Answer 2

Change <tr style="vertical-align: central">-<tr style="vertical-align: middle"> e a.userLink proprietà display-inline-block o inline.

jsfiddle

Answer 3

provare la mia tecnica; segui questo

.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> 

e morfema tutto bene! ;)

Answer 4

Provare a utilizzare: line-height: 150px per impostare l'altezza del contenuto all'interno della casella. Questo dovrebbe funzionare bene se c'è solo una singola riga di contenuto.

Answer 5

Usa valign="middle" nel <td>

Esempio:

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

Answer 6

provare questo:

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; 
} 

E un demo.

Si noti che consente solo una riga di testo ... è un problema?

EDIT, ha trovato una soluzione migliore, visualizzare l'ancoraggio come una cella di tabella, lavora su più righe troppo: il testo

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

Un ottimo modo per ottenere perfettamente centrato è quello di utilizzare un layout FlexBox . È possibile orizzontalmente e verticalmente centrare il contenuto di un elemento contenitore con pochissimo codice:

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

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