ट्विटर बूटस्ट्रैप में एक तालिका में पाठ को केंद्रित करना

Question

किसी कारण से, तालिका के अंदर का पाठ अभी भी केंद्रित नहीं है। क्यों? मैं तालिका के अंदर पाठ को कैसे केंद्रित करूं?

इसे वास्तव में स्पष्ट करने के लिए: उदाहरण के लिए, मैं "लोरेम" को चार "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

Answer 1

.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

Comments

बाद के संस्करणों में इसके लिए एक पाठ-केंद्र वर्ग है।

— एमजीपी

खबरदार: .table td {पाठ-संरेखण: केंद्र; } अपने सभी

— TD

@ xr09 हाँ, वहाँ है, .text-centerलेकिन .table tdइच्छाशक्ति की विशिष्टता अभी भी उसे हरा देगी। यही कारण है कि बूटस्ट्रैप को सीधे कक्षाओं में शुरू करने के बजाय टग्नेम्स के साथ शुरू करना चाहिए था जैसे.table

— सिन्थेटा

जोड़े .texter-centerमें <table>और सभी पंक्तियों केंद्रित हो जाएगा।

— chaim

@chaim टिप्पणी को उत्तर के रूप में पोस्ट किया जाना चाहिए। बूटस्ट्रैप-वीयू 2.0.1 पर काम किया

— MrCodeX

Answer 2

बूटस्ट्रैप 3 (3.0.3) में "text-center"कक्षा को एक tdतत्व में जोड़ना बॉक्स से बाहर काम करता है।

यानी, some textतालिका सेल में निम्नलिखित केंद्र :

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

Comments

संपूर्ण .DD td शैली बदलने पर मुझे यह समाधान पसंद आया।

— स्टुअर्ट

आप केवल तालिका तत्व में वर्ग "टेक्स्ट-सेंटर" भी जोड़ सकते हैं।

— shad0wec

यही असली जवाब है।

— Nyxynyx

Answer 3

मुझे लगता है कि त्वरित और स्वच्छ मॉड के लिए html और Css के लिए सबसे अच्छा मिश्रण कौन है:

<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 टैग को बंद करें, फिर कॉपी करें जहाँ आप चाहते हैं :) मुझे आशा है कि यह उपयोगी हो सकता है एक अच्छा दिन w स्टैक्वोवरफ़्लो है

ps बूटस्ट्रैप v3.2.0

Comments

जबकि इस प्रश्न का पहले से ही उत्तर है, नया उत्तर पोस्ट करने का कोई अर्थ नहीं है !!

— प्रज्ञानेश घोड़ा

Answer 4

आप सेल के अंदर "टेक्स्ट-सेंटर" की एक कक्षा के साथ एक div जोड़कर css को बदले बिना td का संरेखण बना सकते हैं:

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

Comments

किसने परिभाषित किया है class?

— अमोल एम कुलकर्णी

जहाँ तक मैं बता सकता हूँ, बूटस्ट्रैप 2.3 में, td {text-align:left}चीजों को केंद्र में करने के लिए कोई अतिरिक्त प्रयास नहीं करेगा। मैंने बस इसे इस तरह से करने का प्रयास किया, जिसमें कोई सफलता नहीं मिली।

— जेसन लोवेंटल

Answer 5

<td class="text-center">

और बूटस्ट्रैप में .text- सेंटर को ठीक करें।

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

Comments

मेरा मानना ​​है कि आप सीधे bootstrap.css को बदलना नहीं चाहते हैं।

— माइक कोल

मुझे bootstrap.css में .text-center को ठीक करने की आवश्यकता नहीं थी, यह इसके बिना काम करता था।

— user573335

Answer 6

मेरे पास एक ही समस्या थी और बिना उपयोग किए इसे हल करने का एक बेहतर तरीका !importantमेरे सीएसएस में निम्नलिखित को परिभाषित कर रहा था:

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

इस तरह text-centerवर्ग की विशिष्टता तालिकाओं में सही ढंग से काम करती है।

Answer 7

यदि यह सिर्फ एक बार है, तो आपको अपनी शैली शीट में परिवर्तन नहीं करना चाहिए। बस उस विशेष को संपादित करें td:

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

चियर्स

Answer 8

बूटस्ट्रैप की एक मुख्य विशेषता यह है कि यह महत्वपूर्ण टैग के उपयोग को कम करता है। उपरोक्त उत्तर का उपयोग करने से उद्देश्य की हार होगी। आप बूटस्ट्रैप को आसानी से अपनी स्वयं की सीएसएस फ़ाइल में कक्षाओं को संशोधित करके और बूस्ट सीएसएस को शामिल करने के बाद लिंक कर सकते हैं।

Answer 9

जोड़ें:

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

Answer 10

जैसे आसपास के <tr>एक कस्टम वर्ग दे :

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

और सीएसएस का चयन करें <td>जो <tr>आपके कस्टम वर्ग के साथ अंदर हों ।

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

इस तरह से आप अन्य तालिकाओं को ओवरराइड करने या बूटस्ट्रैप बेस क्लास (जैसे मेरे कुछ पूर्ववर्तियों द्वारा सुझाए गए) को ओवरराइड करने का जोखिम नहीं उठाते हैं।