একটি অবস্থান কেন্দ্র করুন: স্থির উপাদান

439

আমি position: fixed;একটি গতিশীল প্রস্থ এবং উচ্চতা পর্দা কেন্দ্রিক একটি পপআপ বক্স করতে চাই । আমি margin: 5% auto;এই জন্য ব্যবহার । position: fixed;এটি ছাড়াই অনুভূমিকভাবে সূক্ষ্ম কেন্দ্র হয়, তবে উল্লম্বভাবে নয়। যোগ করার পরে position: fixed;, এটি এমনকি অনুভূমিকভাবে কেন্দ্র করে না।

এখানে সম্পূর্ণ সেট:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
স্নিপেট প্রসারিত করুন

সিএসএসের সাহায্যে আমি এই বাক্সটিকে কীভাবে স্ক্রিনে কেন্দ্র করব?

css  css-position  centering 
— saturngod
সূত্র

উত্তর:

606

আপনি মূলত সেট করতে হবে topএবং leftকরতে 50%DIV আছে বাম উপরের কোণায় কেন্দ্রে। এছাড়াও আপনি সেট করতে হবে margin-topএবং margin-leftDIV আছে উচ্চতা এবং প্রস্থ নেতিবাচক অর্ধেক DIV আছে মাঝখানে দিকে কেন্দ্র নামান।

সুতরাং, সরবরাহিত একটি <!DOCTYPE html>(মান মোড), এটি করা উচিত:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

অথবা, যদি আপনি উল্লম্বভাবে এবং এই ধরনের IE6 / 7 পুরনো ব্রাউজার কেঁদ্রীকরণ যত্ন সম্পর্কে না, তাহলে আপনি পরিবর্তে এছাড়াও যোগ করতে পারেন left: 0এবং right: 0একটি থাকার উপাদানে margin-leftএবং margin-rightএর auto, যাতে নির্দিষ্ট স্থান উপাদান একটি নির্দিষ্ট প্রস্থ থাকার জানে যেখানে তার বাম এবং ডান অফসেট শুরু। আপনার ক্ষেত্রে এইভাবে:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

আবার, আপনি যদি আইই সম্পর্কে চিন্তা করেন তবে এটি কেবল আই 88 + এ কাজ করে এবং এই কেন্দ্রগুলি কেবল অনুভূমিকভাবে নয় horiz

— BalusC
সূত্র
8
আমি সেই কৌশলটি css-tricks.com/… এ পেয়েছি । কিন্তু যখন আমি প্রস্থ এবং উচ্চতা পরিবর্তন করি তখন এটি সরানো কেন্দ্র নয়। হ্যাঁ, উচ্চতা এবং প্রস্থ পরিবর্তন করার সময় আমার মার্জিন-বাম এবং শীর্ষে পরিবর্তন করা উচিত।
— সাটুরঙ্গোদ
2
এফওয়াইআই: এটি মাঝখানে জিনিসগুলি সঠিকভাবে স্থাপন করবে, তবে দুর্ভাগ্যক্রমে আপনি আপনার স্ক্রোল-বারগুলি হারাবেন - ভিউপোর্টের দ্বারা ছাঁটাই হওয়া কোনও সামগ্রী পৌঁছনীয় হবে না, এমনকি আপনি স্ক্রোল করলেও, স্থির অবস্থানটি ভিউপোর্টের উপর ভিত্তি করে, না পাতা। এখনও অবধি, আমি এটির একমাত্র সমাধানটি জাভাস্ক্রিপ্ট সহ পেয়েছি।
— গ্রসক্স
3
গ্রাওক্সিক্স আমার মনে হয় আপনি ওভারফ্লো প্রপার্টি ব্যবহার করে পপ আপের মধ্যে একটি ডিভের ভিতরে স্ক্রোল বারগুলি রাখতে পারেন ।
— ডেভিড উইনিস্কি
1
তদ্ব্যতীত, এটির জন্য আপনাকে অবশ্যই উপাদানটির প্রস্থ জানতে হবে।
— হেক্টর আরডোনজ
2
অই। এনএম যদি কেসটি করে, তবে অবশ্যই ব্রাউজারের আকারটি গতিশীল হবে, কেন এটি প্রশ্নে ছিল তা নিশ্চিত নয়। পরিবর্তে আমি ভেবেছিলাম তার অর্থ হ'ল পপআপের মাত্রাটি গতিশীল হওয়া দরকার। আমার পক্ষে কেসটি রূপান্তর ব্যবহার করে তাই অনুবাদ করুন: অনুবাদ করুন (-50%, -50%); আইই 8 এ না বাদে দুর্দান্ত কাজ করে।
— রাত
324

আমি গতিশীল প্রস্থ এবং উচ্চতা সহ পর্দাটিকে কেন্দ্র করে একটি পপআপ বাক্স তৈরি করতে চাই।

গতিশীল প্রস্থ সহ একটি উপাদানকে আনুভূমিকভাবে কেন্দ্র করার জন্য এখানে একটি আধুনিক পদ্ধতি রয়েছে - এটি সমস্ত আধুনিক ব্রাউজারে কাজ করে; সমর্থন এখানে দেখা যায় ।

আপডেট করা উদাহরণ

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

উভয় উল্লম্ব এবং অনুভূমিক কেন্দ্রের জন্য আপনি নিম্নলিখিত ব্যবহার করতে পারেন:

আপডেট করা উদাহরণ

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

আপনি আরও বিক্রেতার উপসর্গযুক্ত বৈশিষ্ট্যগুলিতেও যুক্ত করতে চাইতে পারেন (উদাহরণগুলি দেখুন)।

— জোশ ক্রোজিয়ার
সূত্র
1
আমি এই পদ্ধতির অনুভূমিকভাবে স্থির অবস্থানের চিত্রটি কেন্দ্র করতে যা উইন্ডো প্রস্থের চেয়ে প্রস্থের চেয়ে বেশি এবং বর্তমান ফায়ারফক্স, ক্রোম, আইই ১১ এবং এজ সংস্করণে সূক্ষ্ম ন্যূনতম কাজ করছে center
— jelhan
1
আমার পরীক্ষায় এটি খুব ভাল কাজ করে (উপসর্গগুলির পিছনে), উইন 10 এজ 14, উইন 7 আই 9 +, উইন 10 ক্রোম, ওএসএক্স ক্রোম, আইপ্যাড 4 ক্রোম এবং সাফারি, অ্যান্ড্রয়েড 4.4+ ক্রোম। আমার জন্য কেবল ব্যর্থতা ছিল অ্যান্ড্রয়েড 4.0.০ যেখানে অনুবাদটি ঘটেনি।
— ডানজাহ
2
@ অ্যানবিজ্যাকড, এটি ক্রোম 61, সাফারি 11 এবং ফায়ারফক্স 65 এর মতো ডেস্কটপ ব্রাউজারগুলিতে কাজ করে তবে অ্যান্ড্রয়েড 6-এ ক্রোম 61 এ নয়, স্বীকৃত উত্তরটি সমস্ত ব্রাউজারে কাজ করে।
— এরিক বার্ক
5
এটি ক্রোমে চিত্রগুলি অস্পষ্ট করে তোলে।
— টমাসজ পি। জিনালস্কি
1
যে কোনওভাবে কেবলমাত্র আমার আইএমজি দিয়ে সমস্ত ব্রাউজার জুড়েই কাজ করেছে approach একটি গুচ্ছ ধন্যবাদ!
— কুগলফিশ
136

বা কেবল আপনার মূল সিএসএসে যুক্ত করুন left: 0এবং right: 0এটি নিয়মিত অ-স্থির উপাদানগুলির সাথে একইরকম আচরণ করে এবং সাধারণ অটো-মার্জিন কৌশল কাজ করে:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

নোট করুন DOCTYPEআইইতে সঠিকভাবে আচরণ করার জন্য আপনাকে একটি বৈধ (এক্স) এইচটিএমএল ব্যবহার করতে হবে (যা আপনার অবশ্যই হওয়া উচিত ..!)

— উইল প্রেসকোট
সূত্র
2
কি অর্থে? মূল উপাদান হ'ল দেহ উপাদান, যার কোনও সীমানা নেই। যদি আপনি শরীরে সীমানা সম্পর্কিত বৈশিষ্ট্যগুলি (?!) যোগ করেন তবে নিশ্চিত হন যে এটি প্রভাবিত হবে, যেমনটি আমি কল্পনা করি 50% কৌশল would আমি আপনাকে আশ্বাস দিচ্ছি যে এটি প্রদত্ত প্যারামিটারগুলির সাথে ঠিক কাজ করে, আমার হাতে থাকা প্রতিটি ব্রাউজারে কেবল এটি যাচাই করা হয় এবং উপাদানটির প্রস্থের উপর নির্ভরশীল না হওয়ার অতিরিক্ত সুবিধা রয়েছে।
— উইল প্রেসকোট
5
আমি যা করেছি তা হ'ল ওপি'র উদাহরণ এইচটিএমএলে সেই 2 টি সম্পত্তি এবং একটি ডক্টাইপ যুক্ত করা হয়েছিল। তবে আরও পরীক্ষার সময় মনে হয় আই 7 (বা কমপ্যাট মোডে 8) সমস্যা - এটি মনে হয় যে এটিও সেট করা rightথাকলে সম্পত্তিটির মানকে সম্মান করে না left! ( এমএসডিএন.মাইক্রোসফটকম / en-us / library/… নোট করে leftএবং rightকেবল আই 7 তে "আংশিক" সমর্থন রয়েছে)। ঠিক আছে, আমি স্বীকার করি এই সমাধানটি কোনও ভাল নয় যদি আই 7 সমর্থনটি গুরুত্বপূর্ণ তবে ভবিষ্যতের জন্য স্মরণ করার জন্য একটি দুর্দান্ত কৌশল :)
— প্রেসকোট
7
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। আমার দুটি স্থির অবস্থানের ছিল অপরিচ্ছন্নতার মুখোশের জন্য অন্যটি মডেলের জন্য। এই একমাত্র উপায় ছিল আমি পর্দার কেন্দ্রে স্থির অবস্থান মডেলটিকে কেন্দ্র করে। অসাধারণ উত্তর কে ভেবেছিল?
— ক্রিস হকস
3
আমি একমত, এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি প্রতিক্রিয়াশীল ডিজাইনেও পুরোপুরি কাজ করে, কারণ এটি প্রস্থের উপর নির্ভর করে না।
— হেক্টর আরডোনজ
7
আমি উত্তরটি সহজ করার পরামর্শ দেব, কারণ কিছু সিএসএস কেবল ওপি-র জন্যই প্রাসঙ্গিক। আপনার যা দরকার তা হ'ল অবস্থান: স্থির; বাম: 0; ডান: 0; মার্জিন: 0 অটো; ।
— হেক্টর আরডোনজ
23

একটি ধারক যুক্ত করুন:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

তারপরে আপনার বাক্সটি এই ডিভের মধ্যে রেখে কাজটি করবে।

— রোমুলাস উড়াকগি স'সাই
সূত্র
"পাঠ্য-প্রান্তিককরণ: কেন্দ্র" অভ্যন্তরীণ ডিভকে কেন্দ্র করে আমার পক্ষে কাজ করে না।
— নিমা
2
display: inline-blockএটি কাজ করার জন্য অভ্যন্তরীণ বাক্স থাকা দরকার । (কিছু অন্যান্য ডিসপ্লে মানও কাজ করতে পারে, যেমন table))
— ব্রিলিয়ানড
উপরে উল্লিখিত CSS করতে একটি ভাল পদ্ধতির যোগ হবে margin:auto;এবং প্রস্থ পরিবর্তন width:50%বা width:400px। তারপরে সামগ্রীগুলি সোজা পাঠ্য, ব্লক উপাদান বা ইনলাইন উপাদান হতে পারে।
— জোশুয়া বার্নস
20

শুধু যোগ কর:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
— দোলক
সূত্র
1
এটি নিয়ে কাজ করে না position: fixed, যা নিয়ে প্রশ্ন। আমি যদি ভুল হয়ে থাকি তবে দয়া করে একটি চলমান কোড স্নিপেট অন্তর্ভুক্ত করতে আপনার উত্তরটি সম্পাদনা করুন।
— ফ্লিম
1
এটি স্থির অবস্থানের সাথে দুর্দান্ত কাজ করে।
— ফুহুই
1
এটি উপাদানটি position: fixedসরবরাহ করে max-widthবা সরবরাহ widthকরে।
— জে লিম
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

এর অভ্যন্তরে পৃথক প্রস্থ, উচ্চতা বা ছাড়াই কোনও উপাদান থাকতে পারে। সবকেন্দ্রিক।

— praffessorr
সূত্র
5

এই সমাধানটির জন্য আপনাকে আপনার পপআপ ডিভের প্রস্থ এবং উচ্চতা নির্ধারণ করতে হবে না।

http://jsfiddle.net/4Ly4B/33/

এবং উপরে পপআপের আকার এবং বিয়োগ অর্ধেক গণনা করার পরিবর্তে জাভাস্ক্রিপ্ট পুরো পর্দাটি পূরণ করার জন্য পপআপসন্টেইনারকে পুনরায় আকার দিচ্ছে ...

(100% উচ্চতা, ডিসপ্লে ব্যবহার করার সময় কাজ করে না: টেবিল-সেল; (উল্লম্বভাবে কোনও কিছু কেন্দ্রীভূত করতে প্রয়োজনীয়)) ...

যাইহোক এটি কাজ করে :)

— BjarkeCK
সূত্র
4 
left: 0;
right: 0;

আই 7 এর অধীনে কাজ করছিল না।

পরিবর্তন 

left:auto;
right:auto;

কাজ শুরু করেছেন তবে বাকি ব্রাউজারগুলিতে এটি কাজ করা বন্ধ করে দেয়! নীচে আই 7 এর জন্য এই উপায়ে ব্যবহার করুন

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
— jatinder
সূত্র
আপনার সম্পূর্ণ উত্তরটি অন্তর্ভুক্ত করার জন্য আপনার উত্তর সম্পাদনা করতে আপত্তি আছে?
— ফ্লিম
এটি বাম এবং ডানদিকে অটো মার্জিন ছাড়া কাজ করবে না।
— RoM4iK
2

আপনি মূলত এটিকে অন্য কোনওতে মুড়িয়ে রাখতে পারেন div এবং এতে সেট positionকরতে পারেন fixed।

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
স্নিপেট প্রসারিত করুন

— আবদুল্লা দোলশাদ
সূত্র
2

আমি vw(ভিউপোর্ট প্রস্থ) এবং vh(ভিউপোর্টের উচ্চতা) ব্যবহার করেছি। ভিউপোর্টটি আপনার সম্পূর্ণ পর্দা। 100vwআপনার পর্দা মোট প্রস্থ এবং 100vhমোট উচ্চতা।

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
— অসীম
সূত্র
1

অবস্থান ঠিক করার জন্য এটি ব্যবহার করুন:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
— HeadAndTail
সূত্র
3
আপনার সমাধান পোস্ট হওয়া প্রশ্নের জন্য কেন কাজ করবে তার একটি ব্যাখ্যা সরবরাহ করুন।
— শেখর চিকারা
0

একটি সম্ভাব্য উত্তর :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
— মার্টিন ওয়াহী
সূত্র
এটি কাজ করে বলে মনে হচ্ছে যদিও এর জন্য আপনাকে উপাদানটির প্রস্থ এবং উচ্চতাটি ইতিমধ্যে জানা দরকার to
— ফ্লিম
0

এটি অনুভূমিক উপাদানগুলির জন্য ব্যবহার করার চেষ্টা করুন যা সঠিকভাবে কেন্দ্র করে না।

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

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

width: calc(100% - 200px);
— রবার্ট রস
সূত্র
0

আমি এই জাতীয় কিছু ব্যবহার করি:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

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

সিএসএস কাস্টম বৈশিষ্ট্য বা calc()সমর্থিত নয় এমন ব্রাউজারগুলির জন্য যদি আপনার এখনও সহায়তা সরবরাহের প্রয়োজন হয় তবে কোনও বিকল্প নয় (ক্যানিয়াসে চেক করুন))

— ফ্যাবিয়েন স্নোওয়ার্ট
সূত্র
0

এই আমার জন্য সবচেয়ে ভাল কাজ করেছে:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
— Flafy
সূত্র
-13

একমাত্র বুদ্ধিমান সমাধান হ'ল টেবিল প্রান্তিককরণ = কেন্দ্রটি এখানে ব্যবহার করুন:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

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

টেবিল ব্যবহার এড়াতে আমি বারবার অনেক বেশি সময় নষ্ট করেছি, তবে অভিজ্ঞতা আমাকে এটির লড়াই বন্ধ করতে বলুন। ডিভিড কেন্দ্রীকরণের জন্য সারণী ব্যবহার করুন। সব ব্রাউজারে সব সময় কাজ করে! আর কখনও চিন্তা করবেন না।

— Cheong
সূত্র
11
এটি প্রশ্নের কোনও উত্তর দেয় না। এর সাথে কোনও নন-সিএসএস সমতুল্য নেই position:fixed।
— ব্রিলিয়ানড
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.