টুইটার বুটস্ট্র্যাপের একটি টেবিলের পাঠ্যকে কেন্দ্র করে

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 {টেক্সট-সারিবদ্ধ: কেন্দ্র;

— your

@ xr09 হ্যাঁ আছে .text-center, তবে এর বৈশিষ্ট্য .table tdএখনও এটিকে পরাস্ত করবে। এ কারণেই বুটস্ট্র্যাপের সরাসরি ক্লাসে লঞ্চ না করে ট্যাগ নাম দিয়ে শুরু করা উচিত ছিল.table

— সিনেটেটিটা

এতে যোগ .texter-centerকরুন <table>এবং সমস্ত সারি কেন্দ্রে পরিণত হবে।

— অগস্ট

@ চেম মন্তব্যটি একটি উত্তর হিসাবে পোস্ট করা উচিত। বুটস্ট্র্যাপ-ভিউ

— ২.০.১

Answer 2

বুটস্ট্র্যাপ 3 (3.0.3) এ "text-center"একটি tdউপাদানটিতে ক্লাস যুক্ত করা বাক্সের বাইরে কাজ করে।

অর্থাৎ, some textএকটি টেবিল কক্ষে নিম্নলিখিত কেন্দ্রগুলি :

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

Comments

পুরো .table টিডি স্টাইল পরিবর্তন করে আমি এই সমাধানটি পছন্দ করেছি।

— স্টুয়ার্ট

আপনি কেবল সারণী উপাদানগুলিতে ক্লাস "পাঠ্য-কেন্দ্র" যুক্ত করতে পারেন।

— ছাদ0wec

এটিই আসল উত্তর।

— Nyxynyx

Answer 3

আমি মনে করি দ্রুত এবং ক্লিন মোডের জন্য এইচটিএমএল এবং সিএসএসের জন্য সেরা মিশ্রণটি কে:

<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>ডি ট্যাগটি বন্ধ করুন তারপরে আপনি যেখানে চান সেখানে অনুলিপি করুন :) আমি আশা করি এটি কার্যকর হতে পারে আপনার দিনটি ভালো Have

PS বুটস্ট্র্যাপ v3.2.0

Comments

যদিও এই প্রশ্নের ইতিমধ্যে উত্তর রয়েছে, নতুন উত্তর পোস্ট করার কোনও অর্থ নেই !!

— প্রগনেশ ঘোদা シ

Answer 4

আপনি কোষের অভ্যন্তরে "পাঠ্য-কেন্দ্র" শ্রেণীর সাথে একটি ডিভ যোগ করে CSS পরিবর্তন না করে টিডি এর সারিবদ্ধ করতে পারেন:

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

Comments

কে সংজ্ঞায়িত করেছেন class?

— আমল এম কুলকারনী

আমি যতদূর বলতে পারি, বুটস্ট্র্যাপ ২.৩-এ td {text-align:left}জিনিসগুলি কেন্দ্রের জন্য কোনও অতিরিক্ত প্রচেষ্টা ওভাররাইড করবে। আমি এইভাবে এটি করার চেষ্টা করেছি, কোনও সাফল্য নেই।

— জেসন লোয়েথাল

Answer 5

<td class="text-center">

এবং bootstrap.css এ। পাঠ্য-কেন্দ্রটি ঠিক করুন:

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

Comments

আমি বিশ্বাস করি আপনি সরাসরি বুটস্ট্র্যাপ সিএসএস পরিবর্তন করতে চান না।

— মাইক কোল

বুটস্ট্র্যাপ সিএসএসে .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>

এবং CSS শুধুমাত্র নির্বাচন আছে <td>গুলি যে ভেতরে <tr>আপনার কাস্টম বর্গ সঙ্গে।

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

এটির মতো আপনি অন্যান্য টেবিলগুলিকে ওভাররাইড করতে বা বুটস্ট্র্যাপ বেস ক্লাসটি ওভাররাইড করার ঝুঁকি রাখেন না (যেমন আমার পূর্বসূরীদের কিছু প্রস্তাবিত)।