ইন এই উদাহরণে ইমেজ কেন্দ্রিক নয়। কেন? আমার ব্রাউজারটি উইন্ডোজ on এ গুগল ক্রোম ভি 10, আইই নয়।
<img src="/img/logo.png" style="margin:0px auto;"/>
উত্তর:
যোগ করুন display:block;এবং এটি কাজ করবে চিত্রগুলি ডিফল্টরূপে ইনলাইন থাকে
স্পষ্ট করার জন্য, কোনও blockউপাদানের জন্য ডিফল্ট প্রস্থটি হ'ল auto, যা অবশ্যই উপস্থিত উপাদানটির সম্পূর্ণ উপলব্ধ প্রস্থ পূরণ করে।
মার্জিনটি সেট করে auto, ব্রাউজারটি বাকি অর্ধেক স্থানকে margin-leftঅর্ধেক এবং অন্য অর্ধেককে নির্ধারিত করে margin-right।
margin:autoপ্রবাহের কোনও আইটেমকে কেন্দ্র করে রাখার জন্য কী কী প্রয়োজন তা যদি আপনি বিস্তারিতভাবে বর্ণনা করেন তবে দুর্দান্ত উত্তর দেবেন । ( display:blockবা display:table, position:staticবা position:relative, ইত্যাদি)
0px autoঠিক পরিবর্তিত হলেও autoএটি এখনও কাজ করে না।
display: flex; align-items: center; justify-content: centerএবং এখন আপনার সামগ্রীটি অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রিক cen বা align-self: center; justify-self: centerবিষয়বস্তু নিজেই এ সরান । css-tricks.com/snippets/css/a-guide-to-flexbox
কিছু পরিস্থিতিতে (যেমন আই, গেকো, ওয়েবকিট পূর্ববর্তী সংস্করণ) এবং উত্তরাধিকার হিসাবে উপাদান রয়েছে position:relative; প্রতিরোধ করবে margin:0 auto;কাজ করা থেকে, এমনকি যদি top, right, bottom, এবংleft সেট নেই।
উপাদানটিকে position:static;(ডিফল্ট) এ সেট করা এই পরিস্থিতিতে এটি ঠিক করতে পারে। সাধারণত, নির্দিষ্ট প্রস্থযুক্ত ব্লক স্তরের উপাদানগুলি margin:0 auto;উভয়ই relativeবা staticঅবস্থানের ব্যবহারকে সম্মান করবে ।
margin: 0 autoতুলনামূলকভাবে অবস্থানযুক্ত উপাদানগুলিতে ঠিক ততক্ষণ সূক্ষ্মভাবে কাজ করে যতক্ষণ না তারা কোনও ভাসা এবং নির্দিষ্ট প্রস্থের ব্লক উপাদানগুলি থাকে ...
floatএবং displayআচরণটি পরিবর্তন করতে পারে।
আপনি অটো প্রস্থ ডিভিও ব্যবহার করে কেন্দ্র করতে পারেন display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
আমার ক্ষেত্রে সমস্যা হল আমি সেট ছিল সর্বনিম্ন ও সর্বোচ্চ প্রস্থ ছাড়া প্রস্থ নিজেই।
position:staticএকটি নির্দিষ্ট width:সেট এবং একটি display:blockউপাদান হতে হবে
যখনই আমরা প্রস্থ যুক্ত করব না এবং যুক্ত margin:autoকরব না তখন আমার ধারণা এটি কার্যকর হবে না। এটা আমার অভিজ্ঞতা থেকে। প্রস্থটি ঠিক যেখানে সমান মার্জিন সরবরাহ করতে হবে তা ধারণা দেয়।
করার জন্য একটি বিকল্প নেই margin-left:auto; margin-right: auto;বা margin:0 auto;বেশী যে ব্যবহার position:absolute;: এই কেমন
(আপনি 50% উপাদান বাম অবস্থান সেটleft:50%; এটির ) তবে উপাদানটি সঠিকভাবে কেন্দ্রীভূত করার জন্য এটি সঠিকভাবে কেন্দ্র করবে না আপনাকে এটিকে একটি প্রদান করতে হবে এর প্রস্থের বিয়োগের অর্ধেকের মার্জিন, এটি আপনার উপাদানটিকে পুরোপুরি কেন্দ্র করবে
এখানে একটি উদাহরণ: http://jsfiddle.net/35ERq/3/
আমার কোনও দিন মনে আছে যে আমি একটি ডিভ কেন্দ্রে ব্যবহার করে অনেক সময় ব্যয় করেছি margin: 0 auto।
আমার display: inline-blockএটি ছিল , যখন আমি এটি সরিয়ে ফেললাম, ডিভটি সঠিকভাবে কেন্দ্র করে।
রস যেমন উল্লেখ করেছে, এটি ইনলাইন উপাদানগুলিতে কাজ করে না।