Как центрировать текст в элементе div?

Question

Я пытаюсь создать квадратный элемент, который будет иметь текст, центрированный как по вертикали, так и по горизонтали. Кроме того, вся площадь квадрата должна быть ссылкой. Это мой 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> 

И это мой 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; 
} 

Он работает в Chrome и Firefox, но не в Internet Explorer. В IE текст находится наверху квадрата, а не посередине. ты можешь помочь мне с этим?

Я только что создал площадка здесь: http://jsfiddle.net/Tschareck/yfnnm/

Answer 1

Вы могли бы упростить вашу структуру немного, и использовать display:table-cell на 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 вhttp://jsfiddle.net/yWLYV/1/

работает до IE8

Answer 2

Изменение <tr style="vertical-align: central"> в <tr style="vertical-align: middle"> и a.userLink свойство display к inline-block или inline.

jsfiddle

Answer 3

попробовать мою технику; следуйте за этим

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

и morpheus все в порядке! ;)

Answer 4

Попробуйте использовать: line-height: 150px, чтобы установить высоту содержимого в поле. Это должно хорошо работать, если имеется только одна строка содержимого.

Answer 5

Использование valign="middle" в примере <td>

:

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

Answer 6

Попробуйте это:

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

И demo.

Обратите внимание, что это разрешает только одну строку текста ... это проблема?

EDIT, нашел лучшее решение, отображать якорь в ячейке таблицы, работает несколько линия тоже:

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

Отличный способ получить идеально центрирован текст использовать макет Flexbox , Вы можете по горизонтали и по вертикали центр содержимое элемента контейнера с очень небольшим количеством кода:

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

Демо: http://jsfiddle.net/913fch6v/