วิธีจัดแนวข้อความให้อยู่กึ่งกลางในแถวตาราง html


222

ฉันกำลังใช้ HTML <table>และฉันต้องการจัดตำแหน่งข้อความ<td>ไปยังกึ่งกลางในแต่ละเซลล์

ฉันจะจัดแนวข้อความในแนวนอนและแนวตั้งได้อย่างไร

คำตอบ:


323

นี่คือตัวอย่างที่มี CSS และstyleแอตทริบิวต์แบบอินไลน์:

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/

แก้ไข : valignแอตทริบิวต์เลิกใช้ใน HTML5 และไม่ควรใช้


1
ไม่vertical-align:middleควรนำไปใช้กับtrองค์ประกอบหรือไม่
posfan12

53

CSS เพื่อจัดกึ่งกลางข้อความในtdองค์ประกอบของคุณคือ

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


25

ตัวอย่างแบบอินไลน์แบบมือยาว:

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

ตัวอย่าง css แบบย่อ:

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

5

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

เป็นคำตอบเดียวที่ถูกต้องเนื่องจากคุณทำงานกับตารางซึ่งเป็นฟังก์ชั่นเก่าที่ใช้กันมากที่สุดสำหรับการจัดรูปแบบอีเมล ดังนั้นทางออกที่ดีที่สุดของคุณคือไม่ใช้เพียงแค่สไตล์ แต่เป็นสไตล์อินไลน์และแท็กตารางที่รู้จัก


5
valignเลิกใช้ใน HTML5 อย่าใช้มัน สำหรับการจัดรูปแบบอีเมลstyleแท็กหรือstyleแอตทริบิวต์แบบอินไลน์จะเป็นทางออกที่ดีที่สุด
Sean the Bean

1

ตัวเลือก> ลูก:

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


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.