Làm cách nào để căn giữa văn bản trong hàng bảng html?


222

Tôi đang sử dụng HTML <table>và tôi muốn căn chỉnh văn bản của <td>trung tâm trong mỗi ô.

Làm cách nào để tôi căn giữa văn bản theo chiều ngang và chiều dọc?

Câu trả lời:


323

Dưới đây là một ví dụ với CSS và các stylethuộc tính nội tuyến :

td 
{
    height: 50px; 
    width: 50px;
}

#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}
<table border="1">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

http://jsfiddle.net/j2h3xo9k/

EDIT : valignThuộc tính không được dùng trong HTML5 và không nên được sử dụng.


1
Không phải vertical-align:middlelà sẽ được áp dụng cho các tryếu tố?
posfan12

53

CSS đến trung tâm văn bản trong các tdyếu tố của bạn là

td {
  text-align: center;
  vertical-align: middle;
}

29

Hãy thử đặt nó trong tệp CSS của bạn.

td {
    text-align: center;
    vertical-align: middle;
}

25

ví dụ nội tuyến tay dài:

<td style='text-align:center;vertical-align:middle'></td> 

ví dụ tốc ký css:

td{
 text-align:center;
 vertical-align:middle;
}

5

<td align="center" valign="center">textgoeshere</td>

Là câu trả lời đúng duy nhất, vì bạn làm việc với các bảng có chức năng cũ phổ biến nhất được sử dụng để định dạng e-mail. Vì vậy, cách tốt nhất của bạn là không chỉ sử dụng kiểu mà là kiểu nội tuyến và thẻ bảng đã biết.


5
valignkhông được dùng trong HTML5. Đừng sử dụng nó. Đối với định dạng email, stylethẻ hoặc stylethuộc tính nội tuyến sẽ là giải pháp tốt nhất.
Sean the Bean

1

Bộ chọn> con:

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}
<table border="1" width='500px'>
  <tr class="text-center-row">
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr class="text-center-row">
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.