Làm cách nào để căn giữa văn bản trong phần tử div?

Question

Tôi đang cố gắng tạo phần tử hình vuông, sẽ có văn bản được canh giữa theo chiều dọc và chiều ngang. Ngoài ra, toàn bộ diện tích của hình vuông phải là một liên kết. Đây là HTML của tôi:

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

Và đây là CSS của tôi:

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

Nó hoạt động trong Chrome và Firefox, nhưng không phải trong trình duyệt Internet Explorer. Trong IE, văn bản nằm ở trên cùng của hình vuông, không phải ở giữa. Bạn có thể giúp tôi với điều này?

tôi vừa tạo sân chơi ở đây: http://jsfiddle.net/Tschareck/yfnnm/

Answer 1

Bạn có thể đơn giản hóa cấu trúc của bạn một chút, và sử dụng display:table-cell trên các yếu tố 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 tạihttp://jsfiddle.net/yWLYV/1/

làm việc xuống IE8

Answer 2

Thay đổi <tr style="vertical-align: central">-<tr style="vertical-align: middle"> và a.userLink tài sản display-inline-block hoặc inline.

jsfiddle

Answer 3

thử kỹ thuật của tôi; theo dõi này

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

và morpheus tất cả các quyền! ;)

Answer 4

Thử sử dụng: line-height: 150px để đặt chiều cao của nội dung trong hộp. Điều này sẽ hoạt động tốt nếu chỉ có một dòng nội dung.

Answer 5

Sử dụng valign="middle" trong <td>

Ví dụ:

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

Answer 6

Hãy thử điều này một:

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

Và một demo.

Xin lưu ý rằng nó chỉ cho phép một dòng văn bản ... đó có phải là sự cố không?

EDIT, tìm thấy một giải pháp tốt hơn, hiển thị các neo như một ô trong bảng, làm việc nhiều dòng quá: văn bản

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

Một cách tuyệt vời để có được một cách hoàn hảo làm trung tâm là sử dụng một bố trí flexbox . Bạn theo chiều ngang và theo chiều dọc có thể tập trung các nội dung của một yếu tố container với mã rất ít:

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

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