অনুভূমিকভাবে কোনও <ডিভি>> কীভাবে কেন্দ্র করবেন

Question

আমি কীভাবে সিএসএস ব্যবহার করে <div>অন্যের মধ্যে অনুভূমিকভাবে কেন্দ্র করতে পারি <div>?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Comments

এই দুর্দান্ত উত্তরের মধ্যে আমি কেবল হাইলাইট করতে চাই যে আপনার অবশ্যই "# ইনার" কে একটি "প্রস্থ" দিতে হবে, বা এটি "100%" হবে এবং আপনি ইতিমধ্যে এটি কেন্দ্রিক কিনা তা বলতে পারবেন না।

— জনি

জোমা টেক আমাকে এখানে নিয়ে এসেছিল

— বার্বু বার্বু

@ বার্বু বার্বু: কীভাবে? কোন প্রসঙ্গে?

— পিটার মর্টেনসেন

youtu.be/kZC12U6EhTc?t=202

— বার্বু বার্বু

Answer 1

আপনি এই সিএসএসটি অভ্যন্তরীণ ক্ষেত্রে প্রয়োগ করতে পারেন <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

অবশ্যই, আপনি সেট করতে হবে না widthকরতে 50%। ধারণক্ষমতার চেয়ে কোনও প্রস্থ কম <div>কাজ করবে। margin: 0 autoকি প্রকৃত কেঁদ্রীকরণ নেই।

আপনি যদি ইন্টারনেট এক্সপ্লোরার 8 (এবং তারপরে) লক্ষ্যবস্তু করে থাকেন তবে পরিবর্তে এটির চেয়ে ভাল হতে পারে:

#inner {
  display: table;
  margin: 0 auto;
}

এটি অনুভূমিকভাবে অভ্যন্তরীণ উপাদান কেন্দ্র তৈরি করবে এবং এটি একটি নির্দিষ্ট সেট না করেই কাজ করে width।

এখানে কাজের উদাহরণ:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Comments

উল্লম্ব কেন্দ্রীকরণের জন্য আমি সাধারণত "লাইন-উচ্চতা" (লাইন-উচ্চতা == উচ্চতা) ব্যবহার করি। এটি সহজ এবং দুর্দান্ত তবে এটি কেবল একটি লাইনের সামগ্রীর পাঠ্যের সাথে কাজ করছে :)

— নিকোলাস গুইলিউম

আইটিতে এটি ভালভাবে কাজ করতে আপনাকে আপনার এইচটিএমএল পৃষ্ঠায়! ডক্টইপিই ট্যাগ ব্যবহার করতে হবে।

— ফ্যাবিও

নোট করুন যে এটি "ভাসা: কিছুই নয়" যুক্ত করা প্রয়োজন হতে পারে # ইনার এর জন্য

— Mert Mertce

আপনি শীর্ষ এবং নীচের মার্জিনগুলি 0 তেও সেট করেছেন যা সম্পর্কিত নয়। আরও ভাল লাগছে margin-left: auto; margin-right: autoআমি মনে করি।

— এমমানুয়েল টাজারি

অগত্যা নয় margin:0 auto: এটি margin: <whatever_vertical_margin_you_need> autoঅনুভূমিক প্রান্তিক হওয়ার পরে দ্বিতীয় হতে পারে ।

— ইয়াকভএল

Answer 2

আপনি যদি অভ্যন্তরে কোনও নির্দিষ্ট প্রস্থ নির্ধারণ করতে না চান তবে আপনি এই জাতীয় divকিছু করতে পারেন:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

এটি অভ্যন্তরীণটিকে divএকটি ইনলাইন উপাদান হিসাবে তৈরি করে যা কেন্দ্র করে text-align।

Comments

সঠিক বাক্য গঠন @SabaAhang যে হবে জন্য float: none;এবং সম্ভবত শুধুমাত্র প্রয়োজন হয় কারণ #inner একটি উত্তরাধিকারসূত্রে করেছে floatপারেন এর leftবা rightঅন্য কোথাও আপনার CSS এ থেকে।

— ডগ ম্যাকলিয়ান

এটি একটি দুর্দান্ত সমাধান। শুধু ভেতরের ইচ্ছা উত্তরাধিকারী যে মনে রাখা text-alignআপনি ভেতরের এর সেট করতে চান করতে পারে, তাই text-alignকরতে initialঅথবা অন্য কোনো মান।

— pmoleri

চমৎকার সমাধান আমি তাই মনে করি

— সাইমন

Answer 3

সেরা পন্থাগুলি সিএসএস 3 এর সাথে রয়েছে ।

বক্স মডেল:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

আপনার ব্যবহারযোগ্যতা অনুসারে আপনি box-orient, box-flex, box-directionবৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন ।

ফ্লেক্স :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

শিশু উপাদানগুলির কেন্দ্রিককরণ সম্পর্কে আরও পড়ুন

• লিঙ্ক 2

• লিঙ্ক 3

• লিঙ্ক 4

এবং এটি ব্যাখ্যা করে যে বক্স মডেলটি কেন সর্বোত্তম পদ্ধতির :

• ডাব্লু 3 সি বক্স মডেলকে কেন আরও ভাল বিবেচনা করা হয়?

Comments

আপনি এই সমাধানটি কার্যকর করার আগে আপনি এই উত্তরটি প্রথমে পড়েছেন তা নিশ্চিত করুন ।

— cimmanon

সাফারি এখন হিসাবে, এখনও প্রয়োজন -webkitflexbox জন্য ফ্ল্যাগ ( display: -webkit-flex;এবং -webkit-align-items: center;এবং -webkit-justify-content: center;)

— ইউসুফ হ্যানসেন

আমি সর্বদা মনে করি যে প্রচুর কোড ব্যবহার করা খারাপ অভ্যাস, উদাহরণস্বরূপ এই কোডটি দিয়ে আমি আমার ডিভকে কেন্দ্র করি: প্রদর্শন: টেবিল; মার্জিন: অটো; সহজ এবং সহজ

— সাইমন

এটি কি আমি বা এই কোড স্নিপেট কেন্দ্রিক নয়

— মাইক

2020 এ আমরা ফ্লেক্সবক্স caniuse.com/#feat=flexbox

— টনিগাত্তা

Answer 4

মনে করুন আপনার ডিভটি 200 পিক্সেল প্রস্থ:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

নিশ্চিত করুন পেরেন্ট উপাদান হল স্থান , অর্থাত্, আপেক্ষিক, স্থায়ী, পরম, অথবা স্টিকি।

আপনি যদি আপনার ডিভের প্রস্থ না জানেন তবে আপনি transform:translateX(-50%);নেতিবাচক মার্জিনের পরিবর্তে ব্যবহার করতে পারবেন ।

https://jsfiddle.net/gjvfxxdj/

সঙ্গে CSS এর Calc () , কোড এমনকি সহজ পেতে পারেন:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

নীতি এখনও একই; মাঝখানে আইটেমটি রাখুন এবং প্রস্থের জন্য ক্ষতিপূরণ দিন।

Comments

আমি এই সমাধানটি পছন্দ করি না কারণ যখন অভ্যন্তরীণ উপাদানটি পর্দার জন্য খুব বিস্তৃত হয়, আপনি পুরো উপাদানটিকে অনুভূমিকভাবে স্ক্রোল করতে পারবেন না। মার্জিন: 0 অটো আরও ভাল কাজ করে।

— আলসো

মার্জিন-বাম: অটো; মার্জিন-ডান: অটো; একটি ব্লক স্তরের উপাদানকে কেন্দ্র করে

— কিলস্ক্রিন

বেশিরভাগ ব্লক স্তরের উপাদানগুলির জন্য ডিফল্ট প্রস্থটি স্বয়ংক্রিয় হয়, যা স্ক্রিনের উপলব্ধ অঞ্চলটি পূরণ করে। কেবল কেন্দ্রীভূত হওয়া এটিকে বাম সারিবদ্ধের মতো একই অবস্থানে রাখে। আপনি যদি এটি দৃষ্টি নিবদ্ধকেন্দ্রিক হতে চান তবে আপনার একটি প্রস্থ নির্ধারণ করা উচিত (বা সর্বাধিক প্রস্থ যদিও ইন্টারনেট এক্সপ্লোরার 6 এবং এর আগে এটি সমর্থন করে না, এবং আই 7 কেবলমাত্র এটি স্ট্যান্ডার্ড মোডে সমর্থন করে)।

— কিলস্ক্রিন

Answer 5

আমি উলম্ব এবং অনুভূমিকভাবে কীভাবে তা দেখানোর জন্য এই উদাহরণটি তৈরি করেছি । align

কোডটি মূলত এটি:

#outer {
  position: relative;
}

এবং...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

centerআপনি যখন নিজের পর্দার আকার পরিবর্তন করবেন তখনও এটি থাকবে stay

Comments

এই পদ্ধতির জন্য +1, আমি এটির সাথে উত্তর দিতে চলেছিলাম। দ্রষ্টব্য যে আপনি যে উপাদানটি অনুভূমিকভাবে কেন্দ্র করতে চান তার উপর অবশ্যই একটি প্রস্থ ঘোষণা করতে হবে (বা উল্লম্বভাবে কেন্দ্রস্থলে উচ্চতা)। এখানে একটি বিস্তৃত ব্যাখ্যা: codepen.io/shshaw/ful/gEiDt । অনুভূমিকভাবে এবং / অথবা অনুভূমিকভাবে উপাদানগুলিকে কেন্দ্র করার আরও বহুমুখী এবং বহুল-সমর্থিত একটি পদ্ধতি।

— stvnrynlds

আপনি ডিভের মধ্যে প্যাডিং ব্যবহার করতে পারবেন না, তবে আপনি যদি ভ্রমটি দিতে চান তবে একই রঙের একটি সীমানা ব্যবহার করুন।

— কাঠবিড়ালি

আমি মনে করি এই পদ্ধতিটি কাজ করার জন্য আপনাকে অভ্যন্তরীণ

— ডিভের

Answer 6

কিছু পোস্টার ব্যবহার করে কেন্দ্রের সিএসএস 3 টি উপায় উল্লেখ করেছে display:box।

এই বাক্য গঠনটি পুরানো এবং আর ব্যবহার করা উচিত নয়। [ এই পোস্টটি দেখুন] ।

সুতরাং কেবলমাত্র সম্পূর্ণতার জন্য এখানে ফ্লেক্সিবল বক্স লেআউট মডিউলটি ব্যবহার করে সিএসএস 3-এ কেন্দ্রের সর্বশেষতম উপায় ।

সুতরাং আপনার যদি সহজ মার্কআপ থাকে তবে:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... এবং আপনি বাক্সের মধ্যে আপনার আইটেমগুলি কেন্দ্র করতে চান, প্যারেন্ট এলিমেন্টে (.box) আপনার যা প্রয়োজন তা এখানে:

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

আপনার যদি প্রবীণ ব্রাউজারগুলিকে সমর্থন করতে হয় যা ফ্লেক্সবক্সের জন্য পুরানো সিনট্যাক্স ব্যবহার করে তা দেখার জন্য এখানে ভাল জায়গা।

Comments

"সিনট্যাক্স পুরানো হয়ে গেছে" বলতে কী বোঝায়, এটি কি অবহেলা করা হয়?

— কোঙ্গা রাজু

ফ্লেক্সবক্সের স্পেসিফিকেশনটি 3 টি বড় সংশোধনী পেরিয়ে গেছে। সর্বাধিক সাম্প্রতিক খসড়াটি সেপ্টেম্বর ২০১২ থেকে, যা পূর্ববর্তী সমস্ত খসড়াগুলিকে আনুষ্ঠানিকভাবে হ্রাস করে। : কিন্তু, ব্রাউজার সমর্থনের তিলকিত (বিশেষত পুরানো Android ব্রাউজার) হল stackoverflow.com/questions/15662578/...

— cimmanon

জাস্টিন পলির সংস্করণ না থাকলে ক্রোমে এটি আমার জন্য কাজ করেছিল।

— ভার্ন জেনসেন

"ন্যায়সঙ্গত বিষয়বস্তু: কেন্দ্র নয়"; উল্লম্ব সারিবদ্ধকরণ এবং "সারিবদ্ধ আইটেমগুলি: কেন্দ্র;" অনুভূমিক প্রান্তিককরণের জন্য?

— ওয়াউটার ভ্যানহের্ক

@ ওয়াটারভ্যানহার্ক এটি flex-directionমানের উপর নির্ভর করে । যদি এটি 'সারি' (ডিফল্ট) হয় - তবে justify-content: center; অনুভূমিক প্রান্তিকরণের জন্য (যেমন আমি উত্তরে উল্লেখ করেছি) যদি এটি 'কলাম' হয় - তবে justify-content: center;উল্লম্ব সারিবদ্ধকরণের জন্য।

— ড্যানিয়েল্ড

Answer 7

আপনি যদি কোনও নির্দিষ্ট প্রস্থ সেট করতে না চান এবং অতিরিক্ত মার্জিনটি না চান তবে display: inline-blockআপনার উপাদানটিতে যুক্ত করুন।

তুমি ব্যবহার করতে পার:

#element {
    display: table;
    margin: 0 auto;
}

Comments

প্রদর্শন হিসাবে একই প্রয়োজনীয়তা: ইনলাইন-ব্লক খুব ( quirksmode.org/css/display.html )

— montrealmike

আমি এটিও ব্যবহার করেছিলাম, তবে এর display: table;আগে কখনও হয়নি । এটার কাজ কি?

— ম্যাট ক্রিমেন্স

Answer 8

অজানা উচ্চতা এবং প্রস্থের একটি ডিভকে কেন্দ্র করে

অনুভূমিকভাবে এবং উল্লম্বভাবে। এটি যুক্তিসঙ্গতভাবে আধুনিক ব্রাউজারগুলির সাথে কাজ করে (ফায়ারফক্স, সাফারি / ওয়েবকিট, ক্রোম, ইন্টারনেট এক্সপ্লোরার 10, অপেরা ইত্যাদি)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

এর সাথে আরও কোডেকেন বা জেএসবিনে টিঙ্কার দিন ।

Answer 9

আপনি এটির প্রস্থ না দিলে কেন্দ্রিক করা যায় না। অন্যথায়, এটি ডিফল্টরূপে পুরো অনুভূমিক স্থান গ্রহণ করবে।

Comments

এবং যদি আপনি প্রস্থ না জানেন? বলুন কারণ বিষয়বস্তু গতিশীল?

— gman

সর্বোচ্চ প্রস্থ? ওটা সম্পর্কে কি?

আমি ব্যবহার করি width: fit-content;এবং margin: 0 auto। আমি মনে করি এটি অজানা প্রস্থের সাথে কাজ করতে পারে।

— রিক

Answer 10

সিএসএস 3 এর বক্স-সারিবদ্ধ সম্পত্তি

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Comments

আপনি এই সমাধানটি কার্যকর করার আগে আপনি এই উত্তরটি প্রথমে পড়েছেন তা নিশ্চিত করুন ।

— cimmanon

Answer 11

সেট widthএবং সেট margin-leftএবং margin-rightকরতে auto। এটি কেবল অনুভূমিকের জন্য । যদি আপনি উভয় উপায় চান, আপনি কেবল এটি উভয় উপায়ে করতে চাই। পরীক্ষা করতে ভয় পাবেন না; এমন কিছু নয় যে তুমি কিছু ভেঙে ফেলবে

Answer 12

আমাকে সম্প্রতি একটি "লুকানো" ডিভ (অর্থাত্‍ display:none;) ভাগ করতে হয়েছে যা এর ভিতরে একটি সারণী ফর্ম ছিল যা পৃষ্ঠায় কেন্দ্রিক হওয়া দরকার। আমি লুকানো ডিভিটি প্রদর্শন করতে এবং তারপরে সিএসএস সামগ্রীটি টেবিলের স্বয়ংক্রিয়ভাবে উত্পন্ন প্রস্থে আপডেট করতে এবং মার্জিনটিকে এটির কেন্দ্রে পরিবর্তন করতে নিম্নলিখিত লিঙ্কটি লিখেছি। (ডিসপ্লে টগলটি কোনও লিঙ্কে ক্লিক করে ট্রিগার করা হয়েছে, তবে এই কোডটি প্রদর্শন করার প্রয়োজন ছিল না))

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

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Answer 13

আমি সাধারণত যেভাবে এটি করি তা নিখুঁত অবস্থানটি ব্যবহার করে:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

এটি কাজ করার জন্য বাইরের ডিভের কোনও অতিরিক্ত প্রোপাইটাইটাইটের প্রয়োজন নেই।

Comments

কেন্দ্রের ডিভের নিচে যদি আপনার অন্যান্য ডিভ থাকে তবে এটি কাজ করতে পারে না।

— NoChance

Answer 14

ফায়ারফক্স এবং ক্রোমের জন্য:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

ইন্টারনেট এক্সপ্লোরার, ফায়ারফক্স এবং ক্রোমের জন্য:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align:সম্পত্তি আধুনিক ব্রাউজারে জন্য ঐচ্ছিক, কিন্তু এটা উত্তরাধিকার ব্রাউজার সমর্থনের জন্য ইন্টারনেট এক্সপ্লোরার quirks মোডে প্রয়োজন।

Comments

পাঠ্য-প্রান্তিককরণের সম্পত্তিটির কোনও প্রয়োজন নেই। এটি সম্পূর্ণ অপ্রয়োজনীয়।

— তৌহিদ রহমান

আইই কুইকস মোডে এটি কাজ করার জন্য টেক্সট-সারিবদ্ধকরণটি আসলে প্রয়োজনীয়, তাই আপনি যদি পুরানো ব্রাউজারগুলিকে সমর্থন করতে কিছুটা এক্সপ্রেশন যুক্ত করতে আপত্তি করেন না তবে এটি রাখুন। (আইই 8 বিধি এবং আই 7 বিধি উভয়ই পাঠ্য-প্রান্তিককরণ ব্যতীত কাজ করে, সুতরাং এটি কেবল

— আই 66

Answer 15

ব্যবহার করুন:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

উপাদানগুলির একটির জন্য একটি প্রস্থ নির্ধারণ না করে এর জন্য আরও একটি সমাধান হ'ল CSS 3 transformবৈশিষ্ট্যটি ব্যবহার করা ।

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

কৌশলটি translateX(-50%)সেট করে sets#inner উপাদানটি তার নিজস্ব প্রস্থের বামে 50 শতাংশ । উল্লম্ব সারিবদ্ধকরণের জন্য আপনি একই কৌশলটি ব্যবহার করতে পারেন।

অনুভূমিক এবং উল্লম্ব সারিবদ্ধতা দেখানো একটি ফ্রিডল এখানে ।

আরও তথ্য মোজিলা বিকাশকারী নেটওয়ার্কে ।

Comments

একজনের পাশাপাশি বিক্রেতার উপসর্গগুলিরও প্রয়োজন হতে পারে:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);

— স্কিপি লে গ্র্যান্ড গুরো

Answer 17

ক্রিস কইয়ার যিনি নিজের ব্লগে 'সেন্টারিং ইন দ্য অজানা' বিষয়ে একটি দুর্দান্ত পোস্ট লিখেছিলেন । এটি একাধিক সমাধানের রাউন্ডআপ। আমি এই পোস্টে পোস্ট করা হয়নি এমন একটি পোস্ট করেছি। এটিতে ফ্লেক্সবক্স সমাধানের চেয়ে আরও বেশি ব্রাউজার সমর্থন রয়েছে , এবং আপনি ব্যবহার করছেন না display: table;যা অন্যান্য জিনিসগুলি ভেঙে ফেলতে পারে।

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 18

আমি সম্প্রতি একটি পন্থা পেয়েছি:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

সঠিকভাবে কাজ করতে উভয় উপাদানই একই প্রস্থ হতে হবে।

Comments

শুধু এই নিয়ম সেট #innerশুধুমাত্র: #inner { position:relative; left:50%; transform:translateX(-50%); }। এটি কোনও প্রস্থের জন্য কাজ করে।

— জোসে রুই সান্টোস

Answer 19

উদাহরণস্বরূপ, এই লিঙ্কটি এবং নীচে স্নিপেট দেখুন:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

আপনার পিতামাতার অধীনে যদি আপনার প্রচুর বাচ্চা থাকে, তাই আপনার সিএসএস সামগ্রীটি ফ্রেডে এই উদাহরণের মতো হওয়া উচিত ।

এইচটিএমএল সামগ্রীটি দেখতে এটি পছন্দ করে:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

তারপরে এই উদাহরণটি ফ্রেডে দেখুন ।

Answer 20

শুধুমাত্র অনুভূমিকভাবে কেন্দ্র করে

আমার অভিজ্ঞতা হিসাবে, অনুভূমিকভাবে একটি বাক্সকে কেন্দ্র করার সর্বোত্তম উপায় হ'ল নিম্নলিখিত বৈশিষ্ট্যগুলি প্রয়োগ করা:

ধারক:

• উচিত text-align: center;

সামগ্রী বাক্স:

• উচিত display: inline-block;

ডেমো:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

আরও দেখুন এই বেহালার !

---

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

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

বাইরের ধারক:

• উচিত display: table;

অভ্যন্তরীণ পাত্রে:

• উচিত display: table-cell;
• উচিত vertical-align: middle;
• উচিত text-align: center;

সামগ্রী বাক্স:

• উচিত display: inline-block;

ডেমো:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

আরও দেখুন এই বেহালার !

Answer 21

সহজতম পথ:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Comments

আপনার ফিডল নোট হিসাবে, # অভ্যন্তরে এটির প্রস্থ স্থাপন করতে হবে।

— মাইকেল টেরি

#outerসর্বদা পূর্বনির্ধারিত width:100%;হিসাবে কোনও প্রয়োজন হয় না । এবং এটি মোটেও প্রয়োজনীয় নয়। <div>width:100%text-align:center

— মোবারক আলী

Answer 22

যদি সামগ্রীর প্রস্থটি অজানা থাকে তবে আপনি নিম্নলিখিত পদ্ধতিটি ব্যবহার করতে পারেন । ধরুন আমাদের এই দুটি উপাদান রয়েছে:

• .outer -- পুরো প্রস্থ
• .inner - কোনও প্রস্থ সেট নেই (তবে একটি সর্বোচ্চ-প্রস্থ নির্দিষ্ট করা যেতে পারে)

ধরুন উপাদানগুলির গণিত প্রস্থ যথাক্রমে 1000 পিক্সেল এবং 300 পিক্সেল। নিম্নলিখিত হিসাবে এগিয়ে যান:

1. .innerভিতরে মোড়ানো.center-helper
2. করুন .center-helperএকটি ইনলাইন ব্লক; এটি একই আকারে হয়ে যায়.inner 300 পিক্সেল প্রশস্ত করে তৈরি ।
3. ধাক্কা .center-helper তার পিতা বা মাতা 50% ডান আপেক্ষিক; এটি এর বামদিকে 500 পিক্সেল আর্টে রাখবে। বাইরের।
4. ধাক্কা .inner 50% তার পিতা বা মাতা আপেক্ষিক বাম; এটি এর বামে -150 পিক্সেল আর্টে রাখবে। কেন্দ্রের সাহায্যকারী যার বাম মানে এর 500 - 150 = 350 পিক্সেল আর্টে। বাইরের।
5. .outerঅনুভূমিক স্ক্রোলবারটি রোধ করতে ওভারফ্লোটি লুকানোতে সেট করুন।

ডেমো:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Answer 23

আপনি এরকম কিছু করতে পারেন

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

এটি #innerউল্লম্বভাবে সারিবদ্ধ হবে । আপনি যদি না চান তবে সম্পত্তি displayএবং vertical-alignবৈশিষ্ট্যগুলি সরিয়ে ফেলুন ;

Answer 24

সংক্ষিপ্ত পথে আপনি যা চান তা এখানে।

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Comments

এটি উল্লম্বভাবে কেন্দ্র করে।

— মাইকেল টেরি

Answer 25

পাঠ্য-সারিবদ্ধ: কেন্দ্র

text-align: centerইনলাইন সামগ্রী প্রয়োগ করা লাইন বক্সের মধ্যে কেন্দ্রীভূত হয়। তবে যেহেতু অভ্যন্তরীণ ডিভটি ডিফল্টরূপে রয়েছে width: 100%আপনাকে একটি নির্দিষ্ট প্রস্থ নির্ধারণ করতে হবে বা নিম্নলিখিতগুলির একটি ব্যবহার করতে হবে:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

মার্জিন: 0 অটো

ব্যবহার margin: 0 autoকরা অন্য বিকল্প এবং এটি পুরানো ব্রাউজারগুলির সামঞ্জস্যের জন্য আরও উপযুক্ত। এটি একসাথে কাজ করে display: table।

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

flexbox

display: flexএকটি ব্লক উপাদানগুলির মতো আচরণ করে এবং এর সামগ্রীটি ফ্লেক্সবক্স মডেল অনুসারে রাখে। এটি সঙ্গে কাজ করে justify-content: center।

দয়া করে নোট করুন: ফ্লেক্সবক্স বেশিরভাগ ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ তবে সবগুলি নয়। ব্রাউজারের সামঞ্জস্যের সম্পূর্ণ এবং আপ টু ডেট তালিকার জন্য এখানে দেখুন ।

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

রুপান্তর

transform: translateআপনাকে সিএসএস ভিজ্যুয়াল ফর্ম্যাটিং মডেলের স্থানাঙ্ক স্থানটি পরিবর্তন করতে দেয়। এটি ব্যবহার করে উপাদানগুলি অনুবাদ, ঘোরানো, ছোট এবং স্কিউ করা যায়। অনুভূমিকভাবে কেন্দ্র করতে এটির প্রয়োজন হয় position: absoluteএবং left: 50%।

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

<center> (থামানো হয়েছে)

ট্যাগটি <center>হ'ল এইচটিএমএল বিকল্প text-align: center। এটি পুরানো ব্রাউজারগুলিতে এবং বেশিরভাগ নতুনতে কাজ করে তবে এই বৈশিষ্ট্যটি অপ্রচলিত এবং ওয়েব মান থেকে সরানো হয়েছে বলে এটি একটি ভাল অনুশীলন হিসাবে বিবেচিত হয় না removed

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Answer 26

আপনি display: flexআপনার বাহ্যিক ডিভের জন্য এবং অনুভূমিকভাবে কেন্দ্রে আপনাকে যুক্ত করতে পারেনjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

অথবা আপনি w3schools পরিদর্শন করতে পারেন - সিএসএস ফ্লেক্স সম্পত্তি আরও ধারণার জন্য।

Answer 27

ফ্লেক্সের 97% এরও বেশি ব্রাউজার সাপোর্ট কভারেজ রয়েছে এবং কয়েকটি লাইনের মধ্যে এই ধরণের সমস্যা সমাধানের সেরা উপায় হতে পারে:

#outer {
  display: flex;
  justify-content: center;
}

Answer 28

ঠিক আছে, আমি এমন একটি সমাধান খুঁজে পেয়েছি যা সম্ভবত সমস্ত পরিস্থিতিতে উপযুক্ত হবে তবে জাভাস্ক্রিপ্ট ব্যবহার করে:

এখানে কাঠামোটি রয়েছে:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

এবং এখানে জাভাস্ক্রিপ্ট স্নিপেট:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

আপনি যদি এটি একটি প্রতিক্রিয়াশীল পদ্ধতির মধ্যে ব্যবহার করতে চান তবে আপনি নিম্নলিখিতগুলি যুক্ত করতে পারেন:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Answer 29

এই পদ্ধতিটিও ঠিক কাজ করে:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

অভ্যন্তরের জন্য <div>, একমাত্র শর্ত এটি heightএবং এটির widthধারকগুলির চেয়ে বড় হওয়া উচিত নয়।

Answer 30

একটি বিকল্প বিদ্যমান ছিল যা আমি পেয়েছি:

প্রত্যেকে ব্যবহার করতে বলে:

margin: auto 0;

তবে আরও একটি বিকল্প আছে। প্যারেন্ট ডিভের জন্য এই সম্পত্তিটি সেট করুন। এটি যে কোনও সময় নিখুঁতভাবে কাজ করে:

text-align: center;

এবং দেখুন, শিশু যান কেন্দ্র।

এবং অবশেষে আপনার জন্য সিএসএস:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

Comments

পাঠক-প্রান্তিককরণ তার পাত্রে তার পাত্রে নয় তার ধারকটিতে পাঠ্য প্রান্তিককরণের জন্য কাজ করুন।

— ললিত কুমার মৌর্য

আমি এটি পরীক্ষা করি, সেট সেট সন্তানের কেন্দ্রে নিয়ে সমস্যা আমার যখন আপনার আরও একটি শিশু থাকে তখন অবশ্যই আরও বেশি বার মার্জিন: 0 অটো ফন্টের উত্তর, তবে, পিতামাতার জন্য পাঠ্য-প্রান্তিককরণ কেন্দ্র, যদিও তারা মৌলিক এবং এই শিশুটিকে কেন্দ্র করে তোলে পাঠ্য হবেন না, পরীক্ষা করুন এবং দেখুন কী হয়

— পেনসাদেঘি

শুধুমাত্র পাঠ্য-সারিবদ্ধ কেন্দ্রের পাঠ্য। আপনি ঠিক এই মুহুর্তে কিন্তু যখন আপনি একটি ধারক সিএসএস লিখেন যার মধ্যে বিভিন্ন প্রস্থের একটি শিশু থাকে এবং রঙ থাকে আপনার কোডটি কার্যকর হয় না। আবার পরীক্ষা কর !!!!

— ললিত কুমার মৌর্য

এই উদাহরণটি দেখুন jsfiddle.net/uCdPK/2 এবং আমাকে বলুন আপনি এটি সম্পর্কে কী মনে করেন !!!!!

— ললিত কুমার মৌর্য