কেন্দ্র একটি স্থিত অবস্থান সারিবদ্ধ

Question

আমি এমন একটি ডিভ নেওয়ার চেষ্টা করছি যা position:fixedআমার পৃষ্ঠায় কেন্দ্র বিন্যাস করেছে ।

আমি সর্বদা এই "হ্যাক" ব্যবহার করে একেবারে অবস্থানযুক্ত ডিভগুলি দিয়ে এটি করতে সক্ষম হয়েছি

left: 50%; width: 400px; margin-left:-200px

... যেখানে মার্জিন-বামের মান ডিভের অর্ধ প্রস্থের।

এটি স্থির অবস্থান ডিভগুলির পক্ষে কাজ করে বলে মনে হচ্ছে না, পরিবর্তে এটি কেবল তাদের বাম-সর্বাধিক কোণায় 50% এ রাখে এবং মার্জিন-বাম ঘোষণাকে উপেক্ষা করে।

এটি স্থির অবস্থানের উপাদানগুলি সারিবদ্ধ করতে পারলে কীভাবে এটি ঠিক করতে হবে তার কোনও ধারণা?

আপনি উপরে বর্ণিত পদ্ধতিটির চেয়ে একেবারে অবস্থিত উপাদানগুলিকে সারিবদ্ধ করার আরও ভাল উপায় বলতে পারলে আমি বোনাস এমএন্ডএম নিক্ষেপ করব।

Comments

আমার জন্য কাজ কর. সব মিলিয়ে আই 6 but (স্পষ্টতই)।

— ববিনস

@ কাইল আপনি যদি কোনও উত্তর বেছে নিতে পারেন তবে এটি অন্য ব্যবহারকারীদের আপনার সমস্যার সমাধান সনাক্ত করতে সহায়তা করবে।

— andreihondrari

Answer 1

কোয়ের উত্তর সঠিকভাবে কেন্দ্র করে না।

সঠিক উপায় CCS3 transformসম্পত্তি ব্যবহার করা হয় । যদিও এটি কিছু পুরানো ব্রাউজারগুলিতে সমর্থিত নয় । এবং আমাদের এমনকি কোনও স্থির বা আপেক্ষিক সেট করার প্রয়োজন নেই width।

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

এখানে কাজ jsfiddle তুলনা ।

Comments

এটা নিখুঁত. আমি এটি কর্ডোভা অ্যাপ্লিকেশন এবং এটির জন্য বড় আপডেট হওয়া ব্রাউজারগুলিতে চালিত হওয়ার প্রত্যাশার জন্য ব্যবহার করেছি :)

— সৌরভ

খুব সহজ কিন্তু সম্পূর্ণ দরকারী। ধন্যবাদ.

— গিলবার্তো সানচেজ

ওহ ধন্যবাদ! আমি দুটি অসম ডিভের মধ্যে পাঠ্যকে কেন্দ্র করার চেষ্টা করেছি এবং এটিই কেবল মার্কআপটিকে বিনষ্ট না করেই কাজ করে!

— আন্দ্রে কাইপভ

আসল উত্তর +1

— sn3ll

@ অ্যালেক্স left: 50%পৃষ্ঠার 50% এ ডিভ স্থানান্তর করে। তবে আপনাকে মনে রাখতে হবে যে এটি ডিভের বাম দিক থেকে শুরু করে, তাই ডিভটি এখনও কেন্দ্রিক নয়। translate(-50%, 0)যা মূলত translateX(-50%)ডিভের বর্তমান প্রস্থকে বিবেচনা করে এবং এটির প্রস্থের -50% দ্বারা আসল স্থান থেকে বাম দিকে নিয়ে যায়।

— emil.c

Answer 2

এই একই সমস্যা রয়েছে এমনদের জন্য, তবে একটি প্রতিক্রিয়াশীল ডিজাইনের সাহায্যে আপনি এটিও ব্যবহার করতে পারেন:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

এটি করার ফলে আপনার divপ্রতিক্রিয়াশীল ডিজাইন এমনকি সর্বদা আপনার স্থির কেন্দ্রীভূত থাকবে।

Comments

এটি আমাকে

— আরডাব্লুডি

এই 37.5% কোথা থেকে পাওয়া যায়?

— অরোরা

@ অরোরা - এটি অবস্থান নির্ধারণের -1/2 (সুতরাং -(75/2)এই ক্ষেত্রে)

— ইনাইমথি

কেন এটি স্বীকৃত উত্তরটি একটি রহস্য নয়, এটি কেবল কাজ করে (টিএম)

— CGK

ক্রপিসের আরও ভাল সমাধান রয়েছে

— ক্যাপো

Answer 3

আপনি এটির জন্যও ফ্লেক্সবক্স ব্যবহার করতে পারেন।

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

Comments

কেন কেন্দ্র উল্লেখ করতে এবং = "কেন্দ্রে" প্রান্তিককরণ করতে বিরক্ত করবেন? পাঠ্য-সারিবদ্ধকরণ: কেন্দ্রটি হল উপায়

— wlf

আপনার উদাহরণটিতে পাঠ্য সারিবদ্ধ শৈলীটি অন্তর্ভুক্ত করা উচিত।

— মানাটেক্স

তোমাকে অনেক ধন্যবাদ! এটি সত্যিই আমাকে সাহায্য করেছে!

— জোয়ান.বিডিএম

<center>অবহিত করা হয়েছে সেই উল্লেখটি সরিয়ে display: flexএবং এর সাথে সম্পর্কিত কিছু বৈশিষ্ট্য এবং আধুনিক প্রযুক্তি ব্যবহার করে আমি আমার উত্তর পরিবর্তন করেছি ।

— andreihondrari

Answer 4

উপরের পোস্ট থেকে, আমি মনে করি সবচেয়ে ভাল উপায়

1. সঙ্গে একটি নির্দিষ্ট ডিভ আছে width: 100%
2. DIV আছে ভিতরে, সাথে একটি নতুন স্ট্যাটিক DIV আছে করা margin-left: autoএবং margin-right: auto, বা টেবিল করতে জন্য align="center"।
3. তদাআআহ, আপনি এখন আপনার স্থির ডিভকে কেন্দ্র করে রেখেছেন

আশা করি এটি সাহায্য করবে।

Comments

আপনার নির্দিষ্ট প্রস্থের সাথে একটি ডিভিও কেন্দ্রীকরণের প্রয়োজন হলে +1 খুব দরকারী। যেমন 990px।

— dcernahoschi

max-widthস্থির অবস্থানের উপাদানগুলির জন্য এটির একমাত্র উপায় আমিও জানি । আপনি একটি স্থির সাইডবার চান যা প্রতিক্রিয়াশীলভাবে আপনার max-width: 1200pxওয়েব পৃষ্ঠার 30% নেয় ? এটি আপনি সেখানে পাবেন।

— মাইকেল

Answer 5

সাধারণ ডিভগুলি ব্যবহার করা উচিত margin-left: autoএবং margin-right: autoতবে এটি স্থির ডিভগুলিতে কাজ করে না। এর চারপাশের উপায়টি অ্যান্ড্রুয়ের উত্তরের সাথে সমান , তবে অবহেলিত <center>জিনিসটি ব্যবহার করে না । মূলত, কেবল স্থির ডিভকে একটি মোড়ক দিন।

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

<div id="wrapper">
    <div id="fixed_div"></div>
</div

এটি ব্রাউজারের সাথে ডিভকে প্রতিক্রিয়া জানাতে গিয়ে একটি ডিভের মধ্যে একটি নির্দিষ্ট ডিভকে কেন্দ্র করে। অর্থাত্ পর্যাপ্ত জায়গা থাকলে ডিভটি কেন্দ্রিক হবে তবে ব্রাউজারের প্রান্তের সাথে সংঘর্ষ হবে যদি সেখানে না থাকে; একটি নিয়মিত কেন্দ্রিক ডিভ কীভাবে প্রতিক্রিয়া দেখায়।

Answer 6

আপনি যদি স্থির অবস্থান ডিভ উভয়ভাবে অনুভূমিক এবং অনুভূমিকভাবে প্রান্তিককরণ করতে চান তবে এটি ব্যবহার করুন

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

Answer 7

আপনি যদি প্রস্থটি 400px জানেন তবে এটি করার সহজ উপায় এটি আমার ধারণা।

 left: calc(50% - 200px);

Answer 8

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

এটি একই কাজ করা উচিত।

Answer 9

আপনি যদি উপাদানটি অন্য নেভিগেশন বারের মতো পৃষ্ঠা জুড়ে বিস্তৃত চান তবে এটি কাজ করে।

প্রস্থ: ক্যালক (প্রস্থ: 100% - প্রস্থ যা কিছু সেটাকে বন্ধ করে দেয়)

উদাহরণস্বরূপ যদি আপনার পাশের নেভিগেশন বারটি 200px হয়:

প্রস্থ: ক্যালক (100% - 200px);

Answer 10

প্রস্থটি ব্যবহার করা এটি বেশ সহজ: 70%; বাকি আছে: 15%;

উইন্ডোর 70% এলিমেন্টের প্রস্থ সেট করে এবং উভয় পক্ষের 15% রেখে দেয়

Answer 11

আমি টুইটার বুটস্ট্র্যাপের সাথে নিম্নলিখিতগুলি ব্যবহার করেছি (v3)

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

অর্থ্যায়ে একটি পূর্ণ প্রস্থের উপাদান তৈরি করুন যা স্থির অবস্থান, এবং কেবলমাত্র এটিতে একটি ধারক নড়ান, ধারকটি সম্পূর্ণ প্রস্থের সাথে তুলনামূলকভাবে কেন্দ্রীভূত। প্রতিক্রিয়াশীল খুব ঠিক আচরণ করা উচিত।

Answer 12

ফ্লেক্স বক্স ব্যবহার করে একটি সমাধান; সম্পূর্ণ প্রতিক্রিয়াশীল:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

Answer 13

আপনি যদি র‍্যাপার পদ্ধতিটি ব্যবহার করতে না চান। তাহলে আপনি এটি করতে পারেন:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}