সিএসএস ব্যবহার করে কীভাবে পরম ডিভকে কেন্দ্র করবেন?

Question

আমি একটি ডিভ করেছি এবং এটি আনুভূমিকভাবে কেন্দ্রিকভাবে চাই - যদিও আমি এটি দিচ্ছি এটি margin:0 auto;কেন্দ্রিক নয় ...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}

Comments

ডিভিতে একেবারে পজিশন উপাদান কীভাবে কেন্দ্র করবেন তার

— লোগানমজ

@ লোগানমজ্জেস এটি নয় কারণ এই প্রশ্নটির প্রস্থটি জানা গেছে।

— ডেভবোগ

Answer 1

আপনার সেট করা দরকার left: 0এবং right: 0।

এটি নির্দিষ্ট করে যে উইন্ডোটির দিকগুলি থেকে কতটা মার্জিন প্রান্তগুলি অফসেট করতে হবে।

'শীর্ষ' এর মতো, তবে একটি বক্সের ডান প্রান্তিক প্রান্তটি বক্সের ব্লকযুক্ত [ডান / বাম] প্রান্তের [বাম / ডান] প্রান্তে কতদূর অফসেট রয়েছে তা নির্দিষ্ট করে।

সূত্র: http://www.w3.org/TR/CSS2/visuren.html#position-prop

দ্রষ্টব্য: উপাদানটির উইন্ডোর চেয়ে প্রস্থ ছোট হওয়া উচিত অন্যথায় এটি উইন্ডোর পুরো প্রস্থ গ্রহণ করবে।

আপনি যদি ন্যূনতম মার্জিন নির্দিষ্ট করতে মিডিয়া প্রশ্নগুলি ব্যবহার করতে পারেন , এবং তারপরে autoবড় স্ক্রিন আকারের জন্য স্থানান্তর করতে পারেন ।

---

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

Comments

নোট: widthএকটি আবশ্যক!

— ইজাস আমীনুদিন 2

হাঁ। এটি সঠিক ... একটি "পাঠ্য-প্রান্তিককরণ: কেন্দ্র" ব্যবহার করে এবং একটি "বাম: 0; ডান: 0;" অনুভূমিকভাবে কেন্দ্রীভূত রাখার সময় আপনাকে একটি ডিভ অবস্থান নির্ধারণ করতে দেয়।

— স্টার্লিং বোর্ন

@ অ্যালেক্সজি আমি আইই ১১ এ সবেমাত্র ভার্চুটি লোড করেছি এবং এটি কাজ করে। আপনি কি স্পষ্ট করতে পারেন?

— ব্রায়ান ওয়েবস্টার

@ আলেক্সজি এটি আইই ১১ এ কাজ করে, তবে আপনি প্রস্থ ঘোষণা না করলে এটি কাজ করবে না । আমারও একই সমস্যা ছিল। উদাহরণ হিসাবে প্রদর্শিত হিসাবে আপনি একটি প্রস্থ ব্যবহার করতে হবে।

— পানামা জ্যাক

margin: autoএটি আমাদের ক্ষেত্রে কাজ করার জন্যও প্রয়োজন

— ক্র্যাশলোট

Answer 2

এটি আই 8 তে কাজ করে না তবে এটি বিবেচনা করার বিকল্প হতে পারে। আপনি যদি প্রস্থ নির্দিষ্ট করতে না চান তবে এটি প্রাথমিকভাবে কার্যকর।

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Comments

এটি সম্ভবত তার প্রকল্পের প্রয়োজনীয়তার উপর নির্ভর করবে।

— ক্রিস সেলবেক

এই সময়ে, সাফারিটিতে কাজ করার জন্য একটি ওয়েবেকিট-উপসর্গ সহ এখনও একটি নিয়ম থাকা দরকার।

— শিক্কেডিয়েল

দুর্ভাগ্যক্রমে এটি কোনওভাবে আশেপাশের

— ডিভের

এটি অবশ্যই উত্তর। আমার জন্য, নির্দিষ্টভাবে প্রস্থ সেট করা নিখুঁত কোনও উপায় নয়।

— মাইকে

Answer 3

যদিও উপরের উত্তরগুলি সঠিক তবে নববিদের পক্ষে সহজ করার জন্য, আপনাকে যা করতে হবে তা হ'ল মার্জিন, বাম এবং ডান সেট করা। নিম্নলিখিত কোডটি এটি সরবরাহ করবে যাতে প্রস্থ সেট করা থাকে এবং অবস্থানটি নিখুঁত:

margin: 0 auto;
left: 0;
right: 0;

ডেমো:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }

<div class="centeredBox">Centered Box</div>

Comments

এটি বুটস্ট্র্যাপ কলামগুলির এক সারিতে নিখুঁত চিত্রগুলির জন্য নিখুঁতভাবে কাজ করেছে

— ZachNag

Answer 4

Flexbox? আপনি ফ্লেক্সবক্স ব্যবহার করতে পারেন।

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

Comments

এটি আসলে আমার অনন্য মামলার জন্য সুন্দরভাবে কাজ করেছে। left: 0; right: 0;100% পর্যন্ত প্রসারিত, যা সন্তানের উপাদানটির পটভূমির রঙ ছিল বলে কোনও বিকল্প ছিল না এবং left: 50%; transform: translateY(-50%);এটি কাজ করে না কারণ এটি শিশুকে 50% প্রস্থে সীমাবদ্ধ করে। এটিই ছিল একমাত্র সমাধান যা সন্তানের নমনীয় মাত্রাগুলি সংরক্ষণ করে (কেবল ব্রাউজার সমর্থনে সীমাবদ্ধ)। ধন্যবাদ!

— বেন ডায়ার

Answer 5

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

Answer 6

এত সহজ, কেবল মার্জিন এবং বাম, ডান বৈশিষ্ট্য ব্যবহার করুন:

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

আপনি এই টিপটিতে আরও দেখতে পারেন => এইচটিএমএল- ওবিনব ব্লগে ডিভ উপাদানটি কীভাবে সেট করবেন

Answer 7

এখানে অবস্থানটি নিখুঁত হলে কেন্দ্রে ডিভ তৈরি করতে দয়া করে এটি ব্যবহার করুন link

এইচটিএমএল:

<div class="bar"></div>

সিএসএস:

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

উদাহরণস্বরূপ jsfiddle

Answer 8

আপনি ব্যবহার করতে পারবেন না margin:auto;উপর position:absolute;উপাদান, যদি আপনি এটি প্রয়োজন হবে না শুধু এটা সরাতে, তবে যদি আপনি করেন, তখন আপনাকে ব্যবহার করতে পারে left:30%;((100% -40%) / 2) এবং মিডিয়া প্রশ্নের সর্বোচ্চ এবং কমপক্ষে মানের জন্য:

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}