การจัดข้อความไว้ตรงกลางตารางใน Twitter Bootstrap

ด้วยเหตุผลบางประการข้อความภายในตารางยังคงไม่อยู่กึ่งกลาง ทำไม? ฉันจะจัดข้อความให้อยู่กึ่งกลางในตารางได้อย่างไร

เพื่อให้ชัดเจนจริงๆ: ตัวอย่างเช่นฉันต้องการให้ "ลอเรม" นั่งตรงกลางของ "1" ทั้งสี่

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

JSFiddle

การ.table tdจัดแนวข้อความถูกตั้งค่าเป็นด้านซ้ายแทนที่จะเป็นกึ่งกลาง

การเพิ่มสิ่งนี้ควรจัดตำแหน่งของคุณทั้งหมดtd:

.table td {
   text-align: center;   
}

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

.table td {
  text-align: center;
}

<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

อัปเดต JSFIDDLE

ใน Bootstrap 3 (3.0.3) การเพิ่ม"text-center"คลาสให้กับtdองค์ประกอบจะทำงานได้ทันที

กล่าวคือศูนย์ต่อไปนี้some textในเซลล์ตาราง:

<td class="text-center">some text</td>

ฉันคิดว่าใครเป็นส่วนผสมที่ดีที่สุดสำหรับ html & Css สำหรับ mod ที่รวดเร็วและสะอาดคือ:

<table class="table text-center">
<thead>
        <tr>                    
        <th class="text-center">Uno</th>
        <th class="text-center">Due</th>
        <th class="text-center">Tre</th>
        <th class="text-center">Quattro</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>
</table>

ปิด<table>แท็ก init จากนั้นคัดลอกตำแหน่งที่คุณต้องการ :) ฉันหวังว่ามันจะเป็นประโยชน์ขอให้มีความสุขในวันที่ดีกับ stackoverflow

ps Bootstrap v3.2.0

คุณสามารถจัดแนว td ได้โดยไม่ต้องเปลี่ยน css โดยเพิ่ม div ด้วยคลาส "text-center" ภายในเซลล์:

    <td>
        <div class="text-center">
            My centered text
        </div>
    </td>

<td class="text-center">

และแก้ไข. text-center ใน bootstrap.css:

.text-center {
    text-align: center !important;
}

ฉันมีปัญหาเดียวกันและวิธีที่ดีกว่าในการแก้ไขโดยไม่ต้องใช้!importantคือการกำหนดสิ่งต่อไปนี้ใน CSS ของฉัน:

table th.text-center, table td.text-center { 
    text-align: center;
}

ด้วยวิธีนี้ความจำเพาะของtext-centerคลาสจะทำงานได้อย่างถูกต้องในตาราง

หากเป็นเพียงครั้งเดียวคุณไม่ควรเปลี่ยนสไตล์ชีต เพียงแก้ไขรายการนั้นtd:

<td style="text-align: center;">

ไชโย

หนึ่งในคุณสมบัติหลักของ Bootstrap คือช่วยลดการใช้! important tag การใช้คำตอบข้างต้นจะทำให้จุดประสงค์ไม่สมบูรณ์ คุณสามารถปรับแต่ง bootstrap ได้อย่างง่ายดายโดยการแก้ไขคลาสในไฟล์ css ของคุณเองและเชื่อมโยงหลังจากรวม css boostrap

เพิ่ม:

<p class="text-center"> Your text here... </p>

เพียงแค่ให้<tr>คลาสที่กำหนดเองโดยรอบเช่น:

<tr class="custom_centered">
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>

และมี css เลือกเฉพาะ<td>s ที่อยู่ใน<tr>คลาสที่กำหนดเองของคุณ

tr.custom_centered td {
  text-align: center;
}

เช่นนี้คุณจะไม่เสี่ยงที่จะแทนที่ตารางอื่นหรือแม้แต่แทนที่คลาสพื้นฐาน bootstrap (เช่นเดียวกับที่รุ่นก่อนของฉันแนะนำ)