টুইটার বুটস্ট্র্যাপ ব্যবহার করে টেবিল ঘরে উল্লম্বভাবে একটি বোতাম কেন্দ্র করে

Question 1

আমি টুইটার বুটস্ট্র্যাপ ব্যবহার করছি, এবং একটি টেবিল ঘরের মধ্যে একটি বোতাম কেন্দ্র করার চেষ্টা করছি। আমার কেবল এটি ঠিক উল্লম্বভাবে কেন্দ্রিক প্রয়োজন।

<table class="table table-bordered table-condensed">
  <tbody>
    <tr>
      <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>
      <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>
    </tr>
  </tbody>
</table>

সমস্যার জন্য দয়া করে আমার জেএসফিডল দেখুন । আমি আমার সম্পর্কে জানার কয়েকটি টেবিল কেন্দ্রিক কৌশল চেষ্টা করেছি তবে কোনওটিই ঠিক মতো কাজ করছে বলে মনে হয় না। কোন ধারনা? আগাম ধন্যবাদ.

আপডেট: হ্যাঁ, আমি চেষ্টা করেছি vertical-align:middle;, এবং এটি যদি ইনলাইন হয় তবে এটি কাজ করে তবে এটি যদি ক্লাসে থাকে তবে tdতা নয়। এটি প্রতিফলিত করতে জেএসফিডেল আপডেট করেছে।

চূড়ান্ত আপডেট: আমি একজন নির্বোধ, এবং এটি বুটস্ট্র্যাপ সিএসএস দ্বারা ওভাররাইট করা হচ্ছে কিনা তা পরীক্ষা করে দেখিনি

Question 2

বুটস্ট্র্যাপ ৩. এক্স এর জন্য:

বুটস্ট্র্যাপে এখন টেবিল কোষগুলির জন্য নিম্নলিখিত স্টাইল রয়েছে:

.table tbody > tr > td{
    vertical-align: top;
}

যাওয়ার উপায়টি হল আপনার নিজের শ্রেণি যুক্ত করা, পূর্ববর্তী নির্বাচকের আরও নির্দিষ্টতা যুক্ত করা:

.table tbody > tr > td.vert-aligned {
    vertical-align: middle;
}

এবং তারপরে আপনার tdএসগুলিতে ক্লাস যুক্ত করুন :

<tr>
    <td class="vert-aligned"></td>
    ...
</tr>

বুটস্ট্র্যাপ ২. এক্স এর জন্য

বুটস্ট্র্যাপ দিয়ে এটি করার কোনও উপায় নেই ।

টেবিল কোষে ব্যবহার করার সময়, উলম্ব-সারিবদ্ধকরণ বেশিরভাগ লোকেরা যা প্রত্যাশা করে তা করে, যা (পুরাতন, অবহেলিত) ভ্যালিন বৈশিষ্ট্যটি অনুকরণ করে। একটি আধুনিক, মান-সম্মতিযুক্ত ব্রাউজারে, নিম্নলিখিত তিনটি কোড স্নিপেট একই কাজ করে:

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

আপনার ফিডল আপডেট হয়েছে তা পরীক্ষা করুন

আরও

এছাড়াও, আপনি tdক্লাসটি ব্যবহার করে উল্লেখ করতে পারবেন না .vertকারণ বুটস্ট্র্যাপের ইতিমধ্যে এই ক্লাসটি রয়েছে:

.table td {
   padding: 8px;
   line-height: 20px;
   text-align: left;
   vertical-align: top; // The problem!
   border-top: 1px solid #dddddd;
}

এবং vertical-align: middle'.vert' শ্রেণিতে ওভারলোড হচ্ছে , সুতরাং আপনাকে এই শ্রেণিটি হিসাবে হিসাবে সংজ্ঞায়িত করতে হবে td.vert।

Question 3

বুটস্ট্র্যাপ 3 এর জন্য সামান্য আপডেট।

বুটস্ট্র্যাপে এখন টেবিল কোষগুলির জন্য নিম্নলিখিত স্টাইল রয়েছে:

.table tbody>tr>td
{
    vertical-align: top;
}

যাওয়ার উপায় হ'ল একই নির্বাচক সহ আপনার নিজস্ব শ্রেণি যুক্ত করা:

.table tbody>tr>td.vert-align
{
    vertical-align: middle;
}

এবং তারপরে এটি আপনার টিডিতে যুক্ত করুন

<td class="vert-align"></td>

Question 4

আপনার সিএসএস এ এটি যোগ করুন

.table-vcenter td {
   vertical-align: middle!important;
}

তারপরে আপনার টেবিলে ক্লাসে যুক্ত করুন:

        <table class="table table-hover table-striped table-vcenter">

Question 5

এটি ঠিক করার জন্য, আমি এই ক্লাসটি ওয়েবপৃষ্ঠায় রেখেছি

<style>                        
    td.vcenter {
        vertical-align: middle !important;
        text-align: center !important;
    }
</style>

এবং এটি আমার টেম্পলেট ফিল্ডে

<asp:TemplateField ItemStyle-CssClass="vcenter">

সিএসএস ক্লাসটি সরাসরি টিডি (টেবিলডেটা) উপাদানকে নির্দেশ করে এবং শেষে প্রতিটি সেটিংয়ের শেষে গুরুত্বপূর্ণ স্ট্যাটামেন্ট থাকে। এটি সিএসএস শ্রেণির সেটিংস বুটস্রেপগুলিকে ছাড়িয়ে যাবে।

আশা করি এটা সাহায্য করবে

Question 6

বোতাম vertical-align: middle;থাকা tdউপাদানটিতে যুক্ত করুন

<td style="vertical-align:middle;">  <--add this to center vertically
  <a href="#" class="btn btn-primary">
    <i class="icon-check icon-white"></i>
  </a>
</td>

Question 7

তাহলে কেন টিডি ডিফল্টটি উল্লম্ব-সারিবদ্ধ: শীর্ষে সেট করা আছে ?? আমি সত্যিই এখনও জানি না। আমি এটি স্পর্শ করার সাহস না। পরিবর্তে এটি আপনার স্টাইলশিটে যুক্ত করুন। এটি টেবিলগুলির বোতামগুলিকে পরিবর্তন করে।

table .btn{
  vertical-align: top;
}