গতিশীল প্রস্থ (সিএসএস) সহ কেন্দ্র স্থির দ্বি

Question

আমার একটি ডিভি আছে যা এই সিএসএস করবে:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

এখন, আমি কীভাবে এই ডিভকে কেন্দ্রিক করতে পারি? আমি ব্যবহার করতে পারি margin-left: -450px; left: 50%;তবে স্ক্রিনটি> 900 পিক্সেল হলে এটি কাজ করবে। এর পরে (যখন উইন্ডোটি <900 পিক্সেল হবে), এটি আর কেন্দ্রিক হবে না।

আমি অবশ্যই কিছু ধরণের জেএস দিয়ে এটি করতে পারি, তবে সিএসএসের সাথে এটি করার কোনও "আরও সঠিক" আছে কি?

Comments

@ লিয়াম - আমি দ্বিমত পোষণ করছি, আমি মনে করি এই প্রশ্নটি নিজে থেকেই একদম সম্পূর্ণ। কোনও নির্দিষ্ট প্রস্থকে কেন্দ্রিক না রেখে ডিভ থাকার ক্ষেত্রে এই প্রশ্নগুলির উত্তর নেই।

— জোশুয়া এম

জোশুয়া যা বলেছিল, তা অন্য একটি ডিভকে কেন্দ্র করে।

— gubbfett

@Liam - যে আরও, আপনি একটি ব্যবহার করতে পারবেন না margin: 0 autoএকটি উপর position: fixedDIV আছে। আপনি কি প্রশ্নটি পড়েছেন?

— জোশুয়া এম

ope না আমিও চেষ্টা করেছি। : পি

— গুববেফেট

@ জোশুয়াএম আপনার জোর 100% সঠিক নয়। আমার উত্তর দেখুন।

— ল্যাঙ্কনবাস

Answer 1

আপনি একটি কেন্দ্রীভূত করতে পারে fixedবা absoluteস্থান উপাদান সেটিং rightএবং leftকরতে 0, এবং তারপর margin-left& margin-rightথেকে autoযেমন আপনি একটি কেন্দ্র করে ছিল staticস্থান উপাদান।

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

এই ফিডল উপর কাজ এই উদাহরণ দেখুন ।

Comments

কেবল উল্লেখ করার জন্য ... এটি অপ্রত্যাশিত নয়, তবে এটি আই 7 এ ব্যর্থ হয়। এটি এখানে বাম থেকে 0px অবস্থিত। এটা আছে ইন্টারনেট কিভাবে কি কখনো কাজ নিখুঁত 8.

— gubbfett

যখন উপাদানটির প্রস্থ স্ক্রিনের প্রস্থের চেয়ে বেশি হয় এটি কাজ করে না .. সেই পরিস্থিতিতে এটি কাজ করে ভাল লাগবে।

— অ্যান্ড্রুব

@andrewb আপনি উভয় উপর একটি সমানভাবে নেতিবাচক মার্জিন প্রয়োগ হতে পারে rightএবং leftঅন্তত একটি এর value >= witdth / 2হিসাবে দেখা যায়, jsfiddle.net/PvfFy/168 কিন্তু অ একটি মার্জিত পদ্ধতির এই প্রোগ্রামটিতে হয়। আমি মজা করার জন্য ক্রোমে এটি পরীক্ষা করেছি, জানি না এটি কীভাবে বাকি অংশে কাজ করবে

— লকনবাস

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

— এনগিমেট

প্রশ্নটি ডায়নামিক প্রস্থ বলে , এটি সম্পূর্ণ সমস্যা, আপনি কেবল এটিকে উপেক্ষা করতে পারবেন না।

— গিল এপশেটেন

Answer 2

আপনি CSS3 এর transformসম্পত্তি নিরাপদে ব্যবহার করতে পারলে এখানে আরও একটি পদ্ধতি রয়েছে :

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... অথবা আপনি উভয় অনুভূমিক এবং উল্লম্ব কেন্দ্রীকরণ চান:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Comments

এটি যতক্ষণ না আধুনিক ব্রাউজারের জন্য, এটি এই উত্তরের সেরা সমাধান! সত্যিকারের একমাত্র "ভাসা: কেন্দ্র" এর মতো, এটিতে আপনি মোড়কের উপাদানটিকে প্রায় কাছাকাছি ক্লিক করতে পারেন এবং তার চারপাশে মাছ ধরার পথে আটকে থাকতে পারবেন না। এই উত্তর ভালবাসা!

— SpYk3HH

সতর্কতা অবলম্বন করুন, পাঠ্যকে কেন্দ্রের শতাংশে অনুবাদ ব্যবহার করবেন না কারণ ফলাফলটি ভাসমান হলে এটি ধীরে ধীরে হবে। হো ছেলে, তুমি তা চাও না, না তুমিও না।

— gnou

সিএসএস রূপান্তর ব্যবহারের ফলে কেবল পাঠ্যের চেয়ে আরও বেশি কিছুতে স্মুথ ঘটতে পারে; রূপান্তরের ফলস্বরূপ আমি মজাদার সীমানা পাচ্ছি।

— নাথান কে

পর্দার আকার পরিবর্তন করার সময় প্রথম দিকে চুক্তি করার সম্ভাবনা (বিভাগের আকারের উপর নির্ভর করে), যার ফলে বিভাগের প্রান্তের চারপাশে বড় বোর্ডার থাকে।

— একক সত্তা

Answer 3

<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

আপনার এটি একটি পাত্রে মোড়ানো প্রয়োজন। এখানে সিএসএস

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}

Comments

আহ, আমি তোমার চিন্তা পছন্দ করি স্থির ডিভটিই কেবল আসল ফলাফলের সাথে অন্য ডিভের ধারক হবে? আমি এটি চেষ্টা করব!

— gubbfett

আমি যখন আপনার উত্তরের স্বজ্ঞাততা পছন্দ করি তখন আমি দেখতে পাচ্ছি না এটি কীভাবে আই 6/7 সমর্থন করবে।

— ম্যাথিউ বার্গ

@ ম্যাথিউবার্গ, ie6 / 7 সম্পর্কে ভাল পয়েন্ট। সেক্ষেত্রে আপনার উত্তরটি সবচেয়ে ভাল কাজ করা উচিত। এটি সামান্য ওটি, তবে ব্যক্তিগতভাবে আমি মনে করি যে বিকাশকারীদের <= ie7 এর জন্য সময় নির্ধারণের জন্য সময় ব্যয় করা উচিত নয়। আমি মনে করি প্রকৃতপক্ষে ডেভেলপারদের সেই ব্রাউজারগুলি ব্লক করা উচিত যারা পুরানো সিস্টেমগুলির সাথে লোক এবং সংস্থাগুলিকে আপগ্রেড করতে বাধ্য করে। কোনও অর্থপ্রদানকারী গ্রাহকের কাছে সেই ধারণাটি বিক্রি করা কত কঠিন! ;)

— gubbfett

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

— ম্যাথিউ বার্গ

এটি এখনও কাজ করে না কারণ আপনি এখনও "ধারক" দিয়ে ক্লিক করতে পারবেন না

— স্পায়ক

Answer 4

এটি এর সামগ্রীর আকার নির্বিশেষে কাজ করে

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

উত্স: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Comments

সাবধান থাকুন: transform: translate(-50%, -50%);পাঠ্যটি অস্পষ্ট হওয়ার কারণ হতে পারে (কমপক্ষে ক্রোমে)

— জিও