সিএসএসের সাহায্যে একটি টেবিল ঘরে ডান সারিবদ্ধ করুন

128

আমার কাছে পুরানো ক্লাসিক কোড রয়েছে

<td align="right">

যা এটি যা বলে তা করে: এটি ঘরের সামগ্রীতে প্রান্তিক করে তোলে। সুতরাং আমি যদি এই ঘরে 2 টি বোতাম রাখি তবে সেগুলি সেটির ডান সাইটে উপস্থিত হবে।

কিন্তু তখন আমি এটি সিএসএসে রিফ্যাক্টর করছি, তবে ডান সারিবদ্ধকরণের মতো কোনও জিনিস নেই? আমি টেক্সট-সারিবদ্ধ দেখছি, এটি কি একই রকম?

css

— মিশেল
সূত্র

154

ব্যবহার

text-align: right

টেক্সট-সারিবদ্ধ CSS বৈশিষ্ট্য বর্ণনা করে যে কীভাবে পাঠ্যগুলির মতো ইনলাইন সামগ্রী এর মূল ব্লক উপাদানটিতে প্রান্তিক করা হয়। পাঠ্য-প্রান্তিককরণগুলি কেবলমাত্র তাদের ইনলাইন সামগ্রীতেই ব্লক উপাদানগুলির প্রান্তিককরণ নিয়ন্ত্রণ করে না।

দেখা

টেক্সট প্রান্তিককরণ

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

— রাহুল
সূত্র

5

একটি <ইনপুট টাইপ = "বোতাম"> একটি ব্লক উপাদান কারণ এটি সঠিকভাবে সারিবদ্ধ হয় না?

— মিশেল

1

এটা নির্ভর করে. আমার একটি অনুচ্ছেদ রয়েছে, যা একটি টেবিল সেলে (সিএসএস প্রদর্শন: টেবিল-ঘর) ভিতরে ব্লক, এবং যদি আমি সেই অনুচ্ছেদে 100% প্রস্থ দিই তবে এটি পাঠ্য-প্রান্তিককরণকে সম্মান করতে শুরু করে। আমি ধরে নিই যে প্রস্থকে সংজ্ঞায়িত করা সর্বদা সেরা জিনিস নয়।

— কোস্টা

3

আমি তখন এটি গ্রহণ করি, text-alignএটি বোতাম এবং নিয়ন্ত্রণের পাশাপাশি পাঠ্যের ক্ষেত্রে প্রযোজ্য হলে সম্পত্তিটির খুব ভাল নাম দেওয়া হয় না। সম্ভবত এটি বলা উচিত ছিল content-align?

— বেন

3

মিশেল: ব্লক উপাদানটি ইনলাইন-ব্লকে সেট করুন, যেমন: টিডি ইনপুট {প্রদর্শন: ইনলাইন-ব্লক; }

— শালামোস

1

বা আমি কেবল ভাসমান কাজ করি: ডান বা ভাল পুরাতন প্রান্তিককরণ = "ডান"। ডাব্লুটিএফ?

— টোন oda

7

আমার জন্য এখন যা কাজ করেছে তা হ'ল:

সিএসএস:

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

এইচটিএমএল:

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

নীচের শব্দটি দেখুন:

http://jsfiddle.net/Joysn/3u3SD/

— Joysn
সূত্র

6

সিএসএস 3 এর 'নবম শিশু' নির্বাচক সম্পর্কে ভুলবেন না। আপনি যদি ডানদিকে পাঠ্য প্রান্তিককরণ করতে চান এমন কলামের সূচিটি জানেন তবে আপনি কেবল উল্লেখ করতে পারেন

table tr td:nth-child(2) {
    text-align: right;
}

বড় টেবিলগুলির ক্ষেত্রে এটি আপনাকে অনেকগুলি অতিরিক্ত মার্কআপ বাঁচাতে পারে!

ইয়া এর জন্য এখানে একটি মূর্খতা .... https://jsfiddle.net/w16c2nad/

— স্যুট 404 পাওয়া যায় নি
সূত্র

দুর্দান্ত: আমি দেখেছি সবচেয়ে সহজ এবং পরিষ্কার সমাধান।

— এনক্রিপ্টিকাস

2

কোনও `td`ঘরে কীভাবে ব্লক উপাদানগুলি অবস্থান করে

প্রদত্ত উত্তরগুলি একটি tdঘরে পাঠ্যের ডান-সারিবদ্ধ করার জন্য দুর্দান্ত কাজ করে ।

আপনি যখন গ্রহণযোগ্য উত্তরে মন্তব্য করেছেন তেমন একটি ব্লক উপাদানকে সারিবদ্ধ করতে চাইছেন তখন এটি সমাধান হতে পারে না। একটি ব্লক উপাদান দিয়ে এগুলি অর্জন করার জন্য, আমি মার্জিন ব্যবহার করা দরকারী বলে মনে করেছি;

সাধারণ বাক্য গঠন

selector {
  margin: top right bottom left;
}

ঠিক ন্যায়সঙ্গত করুন

td {
  /* there is a shorthand, TODO! 🙂 */
  margin: auto 0 auto auto;
}

কেন্দ্র ন্যায্যতা

td {
  margin: auto auto auto auto;
}

/* or the short-hand */
margin: auto;

কেন্দ্র বিন্যাস করুন

td {
  margin: auto;
}

জেএস ফিডল উদাহরণ

বিকল্পভাবে, আপনি যদি tdবিষয়বস্তু প্রদর্শন করতে inline-blockপারেন তবে যদি এটি বিকল্প হয় তবে এটির সন্তানের উপাদানগুলির অবস্থানটি বিকৃত করতে পারে।

— জন মুটোমা
সূত্র