"মার্জিন: 0 অটো" এর জন্য ঠিক কী প্রয়োজন? কাজ করতে?

Question

আমি জানি যে margin: 0 auto;কোনও উপাদানের উপর সেটিংটি এটি কেন্দ্রের জন্য ব্যবহৃত হয় (বাম-ডান)। তবে, আমি জানি যে উপাদানটি এবং তার পিতামাতার অবশ্যই অটো মার্জিনের কাজ করার জন্য নির্দিষ্ট মানদণ্ডগুলি মেনে চলতে হবে এবং আমি কখনই যাদুটি সঠিকভাবে পাইনি বলে মনে করতে পারি না।

সুতরাং আমার প্রশ্নটি সহজ: margin: 0 auto;সন্তানের বাম-ডানদিকে কেন্দ্রের জন্য কোন উপাদানটি কোনও উপাদান এবং তার পিতামাতার উপর সেট করতে হবে ?

Comments

এটি কখনই আইইয়ের জন্য আমার পক্ষে সঠিকভাবে কাজ করে না বলে মনে হয় ... তাই আমি এটি সম্পর্কেও কৌতূহলী।

— এমপেইন

@ মার্ক: আইই margin: 0 auto;কেবলমাত্র স্ট্যান্ডার্ড মোডে সঠিকভাবে পরিচালনা করবে যাতে আপনার একটি ডক্টাইপ লাগবে (যেন এটির আগে প্রয়োজন ছিল না)।

— বোল্টক্লক

Answer 1

আমার মাথার উপরে:

1. উপাদানটি অবশ্যই ব্লক-স্তরের হতে হবে, যেমন display: blockবাdisplay: table
2. উপাদানটি ভেসে উঠবে না
3. উপাদান একটি নির্দিষ্ট বা পরম অবস্থান আছে না ¹

অন্য ব্যক্তির মাথার শীর্ষটি বন্ধ:

4. উপাদানটির অবশ্যই একটি widthনয় যা ² নয়auto

লক্ষ্য করুন সব এই অবস্থার উপাদান অবশ্যই সঠিক হতে হবে এটা কাজ করার জন্য কেন্দ্রিক হচ্ছে।

---

¹ _{এই এক ব্যতিক্রম নেই: যদি আপনার নির্দিষ্ট অথবা একেবারে স্থান উপাদান আছে left: 0; right: 0, এটা হবে স্বয়ংক্রিয় মার্জিন সঙ্গে কেন্দ্রীভূত ।}

² _{প্রযুক্তিগতভাবে, margin: 0 autoএকটি অটো প্রস্থের সাথে কাজ করে তবে অটো প্রস্থটি অটো মার্জিনের চেয়ে বেশি অগ্রাধিকার নেয় এবং ফলস্বরূপ অটো মার্জিন শূন্য হয়, এটি দেখে মনে হয় যে তারা "কাজ করে না"।}

Comments

দুটি 'আমার মাথার উপরে' উত্তর: ও

— রাসেল ডায়াস

স্থির প্রস্থ যুক্ত করুন এবং আপনি সঠিক উত্তর পেয়েছেন

— মেও

অভিশাপ! আমি কোডিংয়ের সময় অন্য প্রত্যেকে উত্তর দিল! আমার মাথার উপরের অংশটিও বন্ধ ...: ও

— কাইল

আমি ol startবৈশিষ্ট্যটি মিস করছি (এবং এটি

— মার্কডাউনে টানানো

@ ত্রিনকো: প্রশ্ন বা আমার উত্তর কখনওই এইচটিএমএল উপস্থাপিত বৈশিষ্ট্য সম্পর্কে কিছু বলেনি (প্রশ্নটি এমনকি ট্যাগ করা হয়নি [এইচটিএমএল]!), সুতরাং আপনি ঠিক কীটিকে বলছেন তা আমি নিশ্চিত নই। যাইহোক, সিএসএস দ্বারা লক্ষ্যযুক্ত প্রতিটি উপাদান সিএসএসের প্রস্থ এবং উচ্চতার বৈশিষ্ট্য থাকতে পারে, সমস্ত এইচটিএমএল উপাদানগুলির সাথে একইভাবে উপস্থাপিত বৈশিষ্ট্য থাকতে পারে না এবং এর কারণটি কেবল এই যে এটি নির্দিষ্ট করে রাখলে তা বোঝা যায় না এইচটিএমএল উপাদানসমূহ।

— বোল্টক্লক

Answer 2

আমার মাথার উপরে, এটি একটি প্রয়োজন width। আপনি যে ধারকটি কেন্দ্র করছেন তার প্রস্থ নির্দিষ্ট করতে হবে (প্যারেন্ট প্রস্থ নয়)।

Comments

সব কিছু আমাদের মাথার শীর্ষে চলে আসছে!

— বোল্টক্লক

Answer 3

সিএসএসের জন্য সম্পূর্ণ বিধি:

1. ( display: blockএবং widthস্বয়ংক্রিয় নয়) বাdisplay: table
2. float: none
3. position: relative

Answer 4

আমার মাথার উপরের অংশটি বন্ধ করে দিন, যদি উপাদানটি কোনও ব্লক উপাদান না থাকে - তাই করুন।

এবং তারপর এটি একটি প্রস্থ দিন।

Answer 5

এটি ডিসপ্লেতেও কাজ করবে: সারণী - এই ক্ষেত্রে একটি দরকারী প্রদর্শন সম্পত্তি কারণ এটির প্রস্থ নির্ধারণের প্রয়োজন হয় না। (আমি জানি এই পোস্টটি 5 বছরের পুরানো, তবে এটি এখনও যাত্রীদের দ্বারা প্রাসঙ্গিক;)

Answer 6

আমার বিড়ালের মাথার উপরের অংশটি নিশ্চিত করুন যে divআপনি কেনার চেষ্টা করছেন সেটি সেট না করে রয়েছে width: 100%।

যদি এটি হয় তবে চাইল্ড ডিভসের উপর নির্ধারিত নিয়মগুলি কী তা বিবেচনা করবে।

Answer 7

দয়া করে এই দ্রুত উদাহরণটিতে যান আমি জেএসফিডাল তৈরি করেছি । হোপফুল এটি বুঝতে সহজ। wrapperকেন্দ্র প্রান্তিক করতে আপনি সাইটের প্রস্থের সাথে একটি ডিভি ব্যবহার করতে পারেন । আপনার অবশ্যই রাখার কারণটি widthহ'ল ব্রাউজারটি জানে যে আপনি তরল বিন্যাসের জন্য যাচ্ছেন না।

Answer 8

আমার পরামর্শটি এখানে:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Answer 9

এটি সম্ভবত আকর্ষণীয় যে কোনও <button>উপাদানকে কাজ করার জন্য আপনাকে প্রস্থ নির্দিষ্ট করতে হবে না - কেবল এটি নিশ্চিত করুন display:block: http://jsfiddle.net/muhuyttr/

Answer 10

কারো জন্য এইমাত্র এই প্রশ্নের আঘাত, এবং ফিক্স করতে সক্ষম হচ্ছে margin: 0 auto, এখানে চল কিছু আমি তোমাকে কাজে লাগতে পারে আবিষ্কৃত: একটি tableউপাদান কোন নির্দিষ্ট প্রস্থ সঙ্গে থাকতে হবে display: tableএবং না display: block জন্য অনুক্রমে margin: autoকাজ করতে। এটি কারও কাছে সুস্পষ্ট হতে পারে, যেহেতু display: blockএবং ডিফল্ট widthমানটির সংমিশ্রণটি একটি টেবিল দেয় যা এর ধারকটি পূরণ করতে প্রসারিত হয়, তবে আপনি যদি টেবিলটিকে "প্রাকৃতিক" প্রস্থ গ্রহণ করতে এবং কেন্দ্রীভূত করতে চান তবে আপনার প্রয়োজনdisplay: table

Comments

এটা সত্য নয়। (যদিও আপনি যদি কেবল এটি দেন display: blockতবে এটি গৃহীত উত্তরের 4 শর্ত পূরণ করতে পারে না)

— কোয়ান্টিন

শীর্ষস্থানীয়দের জন্য কুইন্টিন ধন্যবাদ আমার ক্ষেত্রে, আমি করা হয়নি টেবিল অনুভূমিক স্থান (যা সম্পর্কে পুরো আলোচনা নিবারণ করা মনে হবে পুরন margin: 0 auto) এবং আমিও করতে পারি নি তার সামগ্রীগুলি আলাদা প্রস্থ হতে পারে টেবিল প্রস্থ উল্লেখ। এই ক্ষেত্রে, একমাত্র সমাধান যা কাজ করে (যেমন টেবিলটিকে সাধারণ উপায়ে উপস্থাপন করে তবে এটি কেন্দ্র করে) কোনও প্রস্থের বিধি নয়, display: tableএবংmargin: 0 auto

— স্যামসন