সিএসএসের অনুভূমিক কেন্দ্র স্থির ডিভ?

Question

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

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

ডিভটির 500pxপ্রস্থ থাকতে হবে 30px, উপরের (মার্জিন-শীর্ষ) থেকে দূরে থাকা উচিত, সমস্ত ব্রাউজারের আকারের জন্য পৃষ্ঠার মাঝখানে অনুভূমিকভাবে কেন্দ্রীভূত হওয়া উচিত এবং বাকী পৃষ্ঠাটি স্ক্রোল করার সময় সরে যাওয়া উচিত নয়।

এটা কি সম্ভব?

Comments

এছাড়াও দেখুন স্ট্যাকওভারফ্লো.com

— প্রশ্নগুলি /

Answer 1

left: 50%;
margin-left: -400px; /* Half of the width */

Comments

আপনি যখন ব্রাউজার উইন্ডোটিকে পুনরায় আকার দিন তখন এটি উদ্দেশ্য হিসাবে কাজ করে না।

@ বাহোদির: আপনি কি নিশ্চিত? এটি পুনরায় আকারের জন্য আমার কাছে ঠিক দেখাচ্ছে। আমি মনে করি -400এটি ডিভের প্রশস্ততার কারণে সেট করা হচ্ছে 800।

— মের্লিন মরগান-গ্রাহাম

@ প্রেস্টনবাডার - প্রশ্নটি জিজ্ঞাসা করা একটির মতো?

— কুইন্টিন

সম্পূর্ণ সম্মত - এটি কোনও সমাধান নয় ! এই পদ্ধতিতে কখনই হার্ড কোড করবেন না। -1

— নেট আমি

আমি এটিকে ভোট দিয়েছি না কারণ এটি তার দিনের পক্ষে খারাপ উত্তর ছিল না - এটি একটি ভাল উত্তর ছিল তবে এটি এখন আর নেই, এবং পরের সর্বোচ্চ উত্তরটির সেরা উত্তর হিসাবে দেখা যেতে পারে এমন সমস্ত সহায়তা প্রয়োজন এখন। কোয়ান্টিন: আমি মনে করি যে উত্তরে নিজেই এই মন্তব্যে একটি মন্তব্য করে সম্পাদনা করা ভাল ধারণা হবে - তবে আমি আমার ভোটকে উল্টে দেব।

— নিক রাইস

Answer 2

এখানে উত্তর পুরানো। এখন আপনি সহজেই একটি মার্জিন হার্ডকডিং ছাড়াই CSS3 রূপান্তর ব্যবহার করতে পারেন । এটি সমস্ত উপাদানগুলির সাথে কাজ করে, প্রস্থ বা গতিশীল প্রস্থ নয় এমন উপাদানগুলি সহ।

অনুভূমিক কেন্দ্র:

left: 50%;
transform: translateX(-50%);

উল্লম্ব কেন্দ্র:

top: 50%;
transform: translateY(-50%);

অনুভূমিক এবং উল্লম্ব উভয়:

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

সামঞ্জস্যতা কোনও সমস্যা নয়: http://caniuse.com/#feat=transforms2d

Comments

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

— নিক রাইস

@ নিকরাইস 100% সম্মত হয়েছে। এই উত্তরটি নতুন স্বীকৃত উত্তর হওয়া উচিত। জুনিয়র ডেভসগুলিও বর্তমান গৃহীত উত্তরটি দেখতে পাওয়া উচিত নয় !

— নাট আমি

@ ম্যাট দয়া করে পরিবর্তে এটি গ্রহণ করুন। এটি দেখতে দীর্ঘ স্থানে স্ক্রোল করুন।

— এসএসবিবি

এটি সামগ্রী উপাদানগুলিতে বাক্সের ছায়ায় ঝাপসা প্রভাব ফেলে।

— রব

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

— ম্যাকিয়েজ ক্রাওকিজিক

Answer 3

যদি ইনলাইন-ব্লক ব্যবহার করা কোনও বিকল্প হয় তবে আমি এই পদ্ধতির সুপারিশ করব:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 

আমি এখানে এটির জন্য একটি ছোট পোস্ট লিখেছি: http://salomvary.github.com/position-fixed-horizontally-centered.html

Comments

10x, এটি আমার পক্ষে দুর্দান্ত কাজ করেছে widthডাব্লু ও ও / এর জন্য কোনও সংখ্যা বা কোনও কিছুর জন্য হার্ড-কোড করাতে হয়েছে

— আগরওয়াল

Answer 4

সেপ্টেম্বর ২০১ Edit সম্পাদনা করুন: যদিও এটির জন্য এখনও মাঝে মাঝে আপ-ভোট পাওয়া ভাল, কারণ বিশ্ব এগিয়ে চলেছে, আমি এখন উত্তরটি ট্রান্সফর্ম ব্যবহার করে যাব (এবং এতে এক টন উন্নতি হয়েছে)। আমি আর এইভাবে করব না।

মার্জিন গণনা করতে হবে না বা উপ-ধারক প্রয়োজন হবে না এমন অন্য উপায়:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}

Comments

@ জোয় নীচেরটি কি করে: 0 কী করে? অর্থাৎ কেন এটি প্রয়োজন? (আমি এটি দেখার কিছুক্ষণ সময়!)

— নিক রাইস

bottom:0মেনুটি সর্বদা উল্লম্বভাবে কেন্দ্রীভূত হবে তা নিশ্চিত করবে, তবে আমি এখন দেখতে পাচ্ছি ওপি যা চেয়েছিল তা নয়। :)

— জর্দান এইচ

আমি এটিকে আলাদা প্রসঙ্গে ব্যবহার করার চেষ্টা করেছি এবং এফএফ-তে কেন্দ্র করে না যদি উপাদানগুলির উচ্চতা উইন্ডো (ভিউপোর্ট) উচ্চতার চেয়ে বেশি হয়

— ফিলিপ ওয়ার্মিংহাউসেন

যেহেতু বিশ্ব এগিয়েছে, এখন আমি সেই উত্তরটি দিয়ে যাব যা রূপান্তর ব্যবহার করে। (আমি এই মন্তব্য করার আগে এই উত্তরটি দিয়েছিলাম, উত্তরটি যে উত্তরটি ব্যবহার করেছে - তবে তারা সেই নামটি পরিবর্তন করেছিল তাই আমার মন্তব্যটি আর বোঝা যায়নি এবং আমি এটি মুছে ফেলেছি - পরিবর্তে পরিবর্তনের জন্য এই পৃষ্ঠায় সন্ধান করুন

— নিক রাইস

Answer 5

এভাবে ভৌগলিকভাবে ডিভিডকে কেন্দ্র করা সম্ভব:

এইচটিএমএল:

<div class="container">
    <div class="inner">content</div>
</div>

CSS:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

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

Answer 6

... বা আপনি অন্যটিতে মেনু ডিভটি গুটিয়ে রাখতে পারেন:

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


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

Answer 7

এখানে আরও একটি দ্বি-বিভক্ত সমাধান। এটি সংক্ষিপ্ত রাখার চেষ্টা করা হয়েছে এবং হার্ডকোডযুক্ত নয়। প্রথমত, প্রত্যাশিত এইচটিএমএল:

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

নিম্নলিখিত সিএসএসের পিছনে মূলনীতিটি "বাহ্যিক" এর কিছু দিক স্থাপন করা হয়, তারপরে এটি "অভ্যন্তরীণ" আকারটি তুলনামূলকভাবে স্থানান্তরিত করার জন্য ব্যবহার করুন।

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

এই পদ্ধতির কোয়ান্টিনের অনুরূপ, তবে অভ্যন্তরটি পরিবর্তনশীল আকারের হতে পারে।

Answer 8

পূর্ণ স্ক্রিনের র‍্যাপার ডিভি ব্যবহার করার সময় এখানে একটি ফ্লেক্সবক্স সমাধান রয়েছে। বিষয়বস্তু কেন্দ্রগুলি ন্যায়সঙ্গত করুন এটি চাইল্ডটি অনুভূমিকভাবে ডিভ করুন এবং আইটেমগুলি উল্লম্বভাবে কেন্দ্র করুন।

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}