ฉันกำลังใช้ HTML <table>
และฉันต้องการจัดตำแหน่งข้อความ<td>
ไปยังกึ่งกลางในแต่ละเซลล์
ฉันจะจัดแนวข้อความในแนวนอนและแนวตั้งได้อย่างไร
ฉันกำลังใช้ HTML <table>
และฉันต้องการจัดตำแหน่งข้อความ<td>
ไปยังกึ่งกลางในแต่ละเซลล์
ฉันจะจัดแนวข้อความในแนวนอนและแนวตั้งได้อย่างไร
คำตอบ:
นี่คือตัวอย่างที่มี 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>
แก้ไข : valign
แอตทริบิวต์เลิกใช้ใน HTML5 และไม่ควรใช้
CSS เพื่อจัดกึ่งกลางข้อความในtd
องค์ประกอบของคุณคือ
td {
text-align: center;
vertical-align: middle;
}
ลองใส่สิ่งนี้ลงในไฟล์ CSS ของคุณ
td {
text-align: center;
vertical-align: middle;
}
ตัวอย่างแบบอินไลน์แบบมือยาว:
<td style='text-align:center;vertical-align:middle'></td>
ตัวอย่าง css แบบย่อ:
td{
text-align:center;
vertical-align:middle;
}
<td align="center" valign="center">textgoeshere</td>
เป็นคำตอบเดียวที่ถูกต้องเนื่องจากคุณทำงานกับตารางซึ่งเป็นฟังก์ชั่นเก่าที่ใช้กันมากที่สุดสำหรับการจัดรูปแบบอีเมล ดังนั้นทางออกที่ดีที่สุดของคุณคือไม่ใช้เพียงแค่สไตล์ แต่เป็นสไตล์อินไลน์และแท็กตารางที่รู้จัก
valign
เลิกใช้ใน HTML5 อย่าใช้มัน สำหรับการจัดรูปแบบอีเมลstyle
แท็กหรือstyle
แอตทริบิวต์แบบอินไลน์จะเป็นทางออกที่ดีที่สุด
ตัวเลือก> ลูก:
.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>
<td align="center"valign="center">textgoeshere</td>
vertical-align:middle
ควรนำไปใช้กับtr
องค์ประกอบหรือไม่