কেন্দ্র একদম যথাযথ ডিভের উপর প্রান্তিককরণ করুন

Question

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

ডিভি শীর্ষে রয়েছে, তবে আমি এটি দিয়ে <center>বা এটি কেন্দ্র করতে পারি না margin: 0 auto;

Answer 1

আপনার divনির্দিষ্ট প্রস্থটি নিম্নরূপ দিলে আপনার সমস্যার সমাধান হতে পারে :

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

Comments

আমি জানি না কেন আমি কেন এটি ভাবিনি, যদিও আমরা সারাক্ষণ উল্লম্ব কেন্দ্রীকরণের জন্য একই কৌশল ব্যবহার করি ... যাইহোক ধন্যবাদ, আপনি আমাকে অনেক সময় বাঁচিয়েছেন।

— আয়ুষ

যদি ব্যবহারকারীটি উল্লম্বভাবে স্ক্রোল করে ডিভটি পৃষ্ঠার শীর্ষে প্রদর্শিত হয় যখন এটি দৃশ্যমান স্থানে প্রদর্শিত হবে

— PUG

আমি আমার ওভারলে ডিভিতে গতিশীলভাবে রজিযুক্ত চিত্রগুলির থাম্বনেলগুলি প্রদর্শন করছি, সুতরাং আমি প্রস্থটি জানি না।

— পিইজিজি

এটি কেবলমাত্র এক কর্মচক্র, স্ট্যাকওভারফ্লো.com / প্রশ্নগুলি / 1776915/… সমাধান হিসাবে উপস্থিত হবে

— PUG

এটি সঠিক উত্তর নয়। বিভিন্ন মিডিয়া প্রকার এই স্নিপেটকে সমর্থন করবে না।

— সুজন

Answer 2

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

Comments

কিভাবে কাজ করে? আপনার উত্তর বৈধ কেন আপনি প্রদান করতে পারেন?

— আফজাইল্লামা

আমি 99% সময় অন্যদের চেয়ে এই পদ্ধতিটি সত্যিই পছন্দ করি, আপনাকে প্যাডিং, সীমানা ইত্যাদির সাথে কারবার করতে হবে না আমি এটিকে কখনও ব্যর্থ হতে দেখিনি, পরের বার এটি আপনার জন্য ব্যর্থ হলে উদাহরণ দেয়।

— ড্যান

এই সমাধানটি সম্পর্কে দুর্দান্ত জিনিসটি এটি পার্সেন্টগুলির সাথেও কাজ করে, এটি নিশ্চিত না যে এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ

— কিনা

কি দারুন. আমি এটি কাজ করার আশা করছিলাম না তবে এটি আমার জন্য

— মনোমুগ্ধকর

আমি সম্মত হই যে এটি সঠিক উত্তর হওয়া উচিত, একটি -200px মার্জিনের চিৎকার আমার কাছে হ্যাক করে।

— মানি 5556

Answer 3

আমি জানি যে আমি পার্টিতে দেরি করেছি, তবে আমি ভেবেছিলাম যে এমন লোকদের জন্য আমি এখানে একটি উত্তর সরবরাহ করব যাঁদের অনুভূমিকভাবে একটি নিখুঁত আইটেমের অবস্থানের প্রয়োজন, যখন আপনি এর সঠিক প্রস্থতা জানেন না।

এটা চেষ্টা কর:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

একই কৌশলটি প্রয়োগ করা যেতে পারে, কারণ আপনার যখন উল্লম্ব সারিবন্ধের প্রয়োজন হতে পারে কেবল তখন এর মতো বৈশিষ্ট্যগুলি সামঞ্জস্য করে:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Comments

হোয়াট এটা সত্যিই দারুন! আপনি এটি ব্যাখ্যা করতে পারেন কিভাবে এটি কাজ করে? সম্পাদনা: কিছু শিকার করেছেন এবং এটি বামের মতো মনে হচ্ছে: 50% ডিভের বাম অবস্থানটি কেন্দ্রে নিয়ে যায় যা সত্যিকার অর্থে কেন্দ্র নয়। তবে অনুবাদটি এটিকে সামগ্রীর প্রস্থের

— আজিজজ 1

নিখুঁত অবস্থান কোনও আইটেমের উপরের বাম থেকে অবস্থান করবে। অনুবাদ ব্যবহার করা হলে এটি এর আকারের সাথে সম্পর্কিত পরিমাণে স্থানান্তরিত হবে।

— মাইকেল জিওভান্নি পমো

মাইকেল, কেবল আপনি জানতে চেয়েছিলেন, আপনি পার্টি কুঁড়ি থেকে দেরী করেন নি ... এবং যারা জানেন না তাদের জন্য: রূপান্তর: অনুবাদ করুন (-50%, -50%); উল্লম্ব এবং অনুভূমিক উভয়ই 1 লাইন দিয়ে কেন্দ্র করে

— মার্ভেল মো

Answer 4

এটি উল্লম্ব এবং অনুভূমিকভাবে উভয়কে কেন্দ্র করতে এটি করুন:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Answer 5

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Comments

ধন্যবাদ. এটি আমার পক্ষে কাজ করে।

— হেনরিক ভ্যান ক্লাভেরেন

Answer 6

যদি আপনার আপেক্ষিক প্রস্থ (শতাংশে) হওয়া প্রয়োজন হয় তবে আপনি আপনার ডিভকে পরম স্থানে স্থির করে রাখতে পারেন:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

মনে রাখবেন যে কোনও উপাদানকে একেবারে অবস্থান করতে পিতা-মাতার উপাদানটি তুলনামূলকভাবে অবস্থান করতে হবে।

Answer 7

আমার একই সমস্যা ছিল এবং আমার সীমাবদ্ধতাটি হ'ল আমার পূর্বনির্ধারিত প্রস্থ থাকতে পারে না। যদি আপনার উপাদানটির নির্দিষ্ট প্রস্থ না থাকে তবে এটি ব্যবহার করে দেখুন

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

তারপরে দেখতে এইচটিএমএল পরিবর্তন করুন

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

Answer 8

অথবা আপনি আপেক্ষিক ইউনিট ব্যবহার করতে পারেন, যেমন

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

Answer 9

হ্যাঁ:

div#thing { text-align:center; }

Comments

এটি একটি ডিভের মধ্যে সামগ্রীগুলি সারিবদ্ধ করবে। এটি পৃষ্ঠার কেন্দ্রে ডিভ সারিবদ্ধ করবে না। এটি নথির প্রবাহের অংশ হিসাবে থাকা সামগ্রীর ব্যতীত অন্য কোনওভাবে একেবারে অবস্থানযুক্ত ডিভকে সারিবদ্ধ করবে না।

— কার্টারম্যান