CSS এ টেবিল টিডিতে কেন্দ্রের চিত্র

Question

আমি টেবিলের টিডির কেন্দ্রে একটি চিত্র সারিবদ্ধ করার চেষ্টা করছি। এটি মার্জিন-বামকে একটি নির্দিষ্ট মান হিসাবে সেট করার সাথে কাজ করেছে তবে এটি টিডি আকারও বাড়িয়েছে এবং এটি আমি যা চেয়েছিলাম ঠিক তা নয়

এটি করার কোনও কার্যকর উপায় আছে কি? আমি টেবিলের উচ্চতা এবং উইথের জন্য শতাংশ ব্যবহার করেছি।

Comments

সম্পর্কিত প্রশ্ন: stackoverflow.com/questions/8639383/… পিতামাতাকে (এখানে টিডি) পাঠ্য-প্রান্তিককরণের একটি শৈলী প্রদান করা ছাড়াও, আপনাকে বাচ্চাকে (এখানে, ইমজি) একটি স্টাইলের প্রদর্শন দিতে হবে: ব্লক বা প্রদর্শন : ইনলাইন-ব্লক

— ম্যাথহেডিংক্লাউডস

Answer 1

<td align="center">

বা সিএসএসের মাধ্যমে যা এখন পছন্দসই পদ্ধতি ...

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

Comments

ওপিকে নোট করুন ... স্কট-এর দ্বিতীয় বিকল্পটি 'প্রান্তিককরণ' হিসাবে ব্যবহার করুন এইচটিএমএল 5 এগিয়ে যেতে সমর্থিত নয়

— isNaN1247

সুতরাং কিভাবে আমরা এইচটিএমএল 5 পরাভূত করতে পারি?

— শ্রেষ্ঠ

আপনি এইচটিএমএল 5 কে পরাভূত করতে পারেন না you @beardtwizzle .. যোগ করার জন্য ধন্যবাদ।

— স্কট

আমি যদি এটি শীর্ষ থেকেও কেন্দ্রিক চাই তবে

— সোহাইব

@ সাইলেন্টপ্রো<td style="text-align: center; vertical-align: middle;">

— স্কট

Answer 2

CSS এ html5 এর জন্য এটি করার সহজ উপায়:

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

আমার জন্য নিখুঁতভাবে কাজ করেছেন।

Comments

এটি পুরোপুরি কাজ করে; <টিডি স্টাইল = "টেক্সট-সারিবদ্ধ: কেন্দ্র;"> কাজ করে না, <td align = "কেন্দ্র"> কাজ করে তবে HTML5- এ সমর্থিত নয়

— ব্যবহারকার 2431763

Answer 3

মার্জিন ব্যবহার করে টিডির অভ্যন্তরে একটি ডিভকে কেন্দ্র করুন, কৌশলটি ডিভ প্রস্থটিকে চিত্রের প্রস্থের মতো করা।

<td>
    <div style="margin: 0 auto; width: 130px">
          <img src="me.jpg" alt="me" style="width: 130px" />
    </div>
</td>

Comments

@ সাইকে সত্যই নয়, <div>গুলি বেশিরভাগ ইমেল থেকে সরিয়ে ফেলা হয় এবং ভাল অনুশীলন হিসাবে বিবেচিত হয় না।

— crmpicco

Answer 4

এই আমার জন্য নির্দিষ্ট সমস্যাগুলি:

<style>
.super-centered {
    position:absolute; 
    width:100%;
    height:100%;
    text-align:center; 
    vertical-align:middle;
    z-index: 9999;
}
</style>

<table class="super-centered"><tr><td style="width:100%;height:100%;" align="center"     valign="middle" > 
<img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>

Comments

এটি আমার জন্যও স্থির ইস্যু কিন্তু চিত্র ট্যাগে, টেবিল বা টিডি ট্যাগে নয়

— সুমন বাপ্পি

Answer 5

<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>

বা

td
{
    text-align:center;
}

সিএসএস ফাইলে

Answer 6

আপনার autoসিএসএসে আপনার চিত্রের সাথে একটি স্থির সেট করুন এবং চিত্রটিতে একটি- মার্জিন / প্যাডিং যুক্ত করুন ...

div.image img {
    width: 100px;
    margin: auto;
}

বা text-alignকেন্দ্রটি সেট করুন ...

td {
    text-align: center;
}

Answer 7

td image 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Comments

দুর্দান্ত জেনেরিক উত্তর

— ড্যান

Answer 8

আর একটি বিকল্প <th>পরিবর্তে ব্যবহার হয় <td>। <th>কেন্দ্রের ডিফল্ট; <td>বামে ডিফল্ট

Comments

আমি এটি আপনার জন্য ঠিক করে রেখেছি, তবে ভবিষ্যতে এইচটিএমএল উপাদানগুলির প্রদর্শিত হওয়া নিশ্চিত করার জন্য কেবল উভয় পাশে ব্যাকটিক্স (`) ব্যবহার করুন।

— জেরেমি কেনে

Answer 9

ইন্টারনেটে আমার বিশ্লেষণ এবং অনুসন্ধান অনুসারে, চিত্রটি উল্লম্বভাবে কেন্দ্রিকভাবে ব্যবহার <div>করে কেন্দ্রীভূত করার কোনও উপায় খুঁজে পেলাম না কেবল এটি ব্যবহার করেই সম্ভব হয়েছিল <table>কারণ টেবিলটি নিম্নলিখিত সম্পত্তি সরবরাহ করে:

valign="middle"

Comments

এটি এইচটিএমএল 5 এ অসমর্থিত হওয়ায় এই পরামর্শটি দেওয়া হয় না। উল্লম্ব-সারিবদ্ধ সহ সিএসএস স্টাইল বা শ্রেণি ব্যবহার করা ভাল: মধ্যম কলাম বা ধারক প্রয়োগ করা হয়।

— এমবোকিল