প্যারেন্ট ডিভের মধ্যে কীভাবে অনুভূমিকভাবে ডিভকে কেন্দ্র করবেন

Question

আমি কীভাবে divএর পিতামাতার divসাথে অনুভূমিকভাবে কেন্দ্র করব CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

Comments

ডিভ্সের মধ্যে ডিভগুলি কেন্দ্র করে আনুভূমিকভাবে, অনুভূমিকভাবে বা উভয় (খাঁটি সিএসএস) -এর জন্য দুটি সহজ পদ্ধতি এখানে রয়েছে: stackoverflow.com/a/31977476/3597276

— মাইকেল বেঞ্জামিন

Answer 1

আমি ধরে নিচ্ছি যে পিতামাতার ডিভের কোনও প্রস্থ বা প্রশস্ত প্রস্থ নেই এবং সন্তানের ডিভের প্রশস্ততা আরও ছোট। নিম্নলিখিতটি শীর্ষ এবং নীচের জন্য শূন্য এবং পক্ষগুলি স্বয়ংক্রিয়ভাবে ফিট করার জন্য মার্জিন সেট করবে। এটি ডিভকে কেন্দ্র করে।

div#child {
    margin: 0 auto;
}

Comments

@Mark। আইআই 6 এ এটি কীভাবে কাজ করবেন তা আপনি জানেন? আই 6 সত্যিই প্রচুর পরিমাণে চুষে ফেলে, তবে এখনও কিছু লোক এটি ব্যবহার করছে।

— বখতিওর

@ বখতিওর: যতদূর আমার মনে আছে, তা আছে। কোন বিষয়গুলি আপনি দেখছেন? আপনার যদি এমন কোনও নির্দিষ্ট সমস্যা রয়েছে যা আগে ছোঁয়া হয়নি তবে আপনি একটি নতুন প্রশ্ন খুলতে চাইবেন। যদিও আইপি 6 এ যাচাই করতে আমার অ্যাক্সেস নেই।

— এম্বলিং

@ বাখতিয়র: আসলে এটি সম্পর্কে চিন্তাভাবনা করে আমি মনে করি আইইওল্ডে আপনারও ডিভের text-align: center;উপর সেট করা দরকার parentএবং তারপরে এটির জন্য বামে (বা যাই হোক না কেন) সেট করা দরকার child। নিশ্চিত নয় যে এই সমস্যাটি

— আই

@ মার্ক এবং @ বখতিয়র কোনও কারণে আমি আমার ডিভিটি childআপাতদৃষ্টিতে বামে স্থানান্তরিত করছিলাম - ব্রাউজারগুলির তুলনায় তুলনামূলকভাবে যেগুলি আরও মান সম্মত ব্রাউজারগুলির সাথে - আইই এর সমস্ত সংস্করণে যা আমি পরীক্ষা করেছি (আই 6-8)। আর text-align: center;জন্য parentএবং text-align: left;জন্য childঐ সমস্ত সংস্করণের জন্য এটি সংশোধন করা হয়েছে।

— ব্রুকমার্কার 16

Answer 2

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

Comments

এই সমাধান আই ই 6 সমর্থন করে, কিন্তু ভুলে যুক্ত করতে না text-align:left;#child DIV আছে করতে

— Moak

text-align:centerসন্তানের ডিভ না পিতামাতাদের ডিভ?

— আনিস নায়ের

Answer 3

মাত্র আগ্রহের বাইরে, আপনি যদি দুটি বা ততোধিক ডিভিডগুলি কেন্দ্র করতে চান (যাতে তারা কেন্দ্রে পাশাপাশি থাকেন), তবে এটি কীভাবে করবেন তা এখানে দেখুন:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>   

Answer 4

বাম এবং ডান মার্জিনের জন্য "অটো" মানটি ব্যবহার করে ব্রাউজারটি উপলব্ধ স্থানটি অভ্যন্তরের ডিভের উভয় দিকে সমানভাবে বিতরণ করতে দেয়:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

Answer 5

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>