<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
এটি divপ্রসারণ 100% হিসাবে হওয়া উচিত কিন্তু চিত্রটি নিজেই কেন্দ্র করে না। কেন?
উত্তর:
কারণ আপনার চিত্রটি একটি ইনলাইন-ব্লক উপাদান । আপনি এটিকে ব্লক-স্তরের উপাদানগুলিতে পরিবর্তন করতে পারেন :
<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />
এবং এটি কেন্দ্রিক করা হবে।
আপনাকে এটিকে ব্লক স্তর হিসাবে রেন্ডার করতে হবে;
img {
display: block;
width: auto;
margin: auto;
}
অ্যাড style="text-align:center;"
কোড নীচে চেষ্টা করুন
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center;vertical-align:middle;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
display: block;ছবিতে যুক্ত করার পরামর্শ দেওয়া হচ্ছে।
আমি জানি এটি একটি পুরানো পোস্ট, তবে আমি কীভাবে একই সমস্যাটি সমাধান করেছি তা ভাগ করে নিতে চেয়েছিলাম।
আমার চিত্রটি একটি ফ্লোট উত্তরাধিকার সূত্রে প্রাপ্ত হয়েছিল: পিতামাতার ক্লাস থেকে বামে। ভাসা সেট করে: আমি কোনওটিই মার্জিন তৈরি করতে সক্ষম হইনি: 0 স্বয়ংক্রিয় এবং প্রদর্শন: সঠিকভাবে ব্লক করা কাজ। আশা করি এটি ভবিষ্যতে কাউকে সহায়তা করতে পারে।
আমি খুঁজে পেয়েছি যে আমার অবশ্যই অবজেক্টের জন্য নির্দিষ্ট প্রস্থ নির্ধারণ করতে হবে বা অন্য কিছুই এটিকে কেন্দ্র করে তুলবে না। আপেক্ষিক প্রস্থ কাজ করে না।
খুলুন divতারপর রাখা
style="width:100% ; margin:0px auto;"
image ট্যাগ (বা) সামগ্রী
বন্ধ ডিভ
আমি পেয়েছি ... মার্জিন: 0 অটো; আমার জন্য কাজ কর. তবে আমি আরও দেখেছি যে ক্লাসটি আরও একটি নির্দিষ্ট বৈশিষ্ট্য দ্বারা ভুগছিল যার কারণে ... ভাসা: বাম; সুতরাং আপনার জন্য যোগ করার প্রয়োজন হতে পারে এটি দেখুন ... ভাসা: কিছুই নয়; এটি আমার ক্ষেত্রে কাজ করেছিল যখন আমি একটি মিডিয়া কোয়েরি কোড করছিলাম।