মার্জিন ব্যবহার করে: ডিভকে উল্লম্বভাবে সারিবদ্ধ করতে স্বয়ংক্রিয়ভাবে

Question

সুতরাং আমি জানি আমরা যদি ব্যবহার করি তবে আমরা অনুভূমিকভাবে একটি ডিভকে কেন্দ্র করতে পারি margin:0 auto;। উচিত margin:auto auto;কাজ আমি মনে করি এটা কাজ করা উচিত? পাশাপাশি এটি উল্লম্বভাবে কেন্দ্রীভূত?

কেন vertical-align:middle;কাজ করে না ?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Comments

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

— গোবিন্দ রাই

if ((নতুন তারিখ ())। getFullYear ()> 2017) ব্যবহারফ্লেক্সবক্স = সত্য;

— ব্র্যান্ডিটো

Answer 1

2020 আগস্ট আপডেট

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

---

আপনি ব্যবহার করতে পারবেন না:

vertical-align:middleকারণ এটি ব্লক-স্তরের উপাদানগুলির জন্য প্রযোজ্য নয়

margin-top:autoএবং margin-bottom:autoকারণ তাদের ব্যবহৃত মানগুলি শূন্য হিসাবে গণনা করবে

margin-top:-50%কারণ শতাংশ-ভিত্তিক মার্জিন মানগুলি ব্লকযুক্ত প্রস্থের সাথে সামঞ্জস্য করা হয়

প্রকৃতপক্ষে, দস্তাবেজের প্রবাহ এবং উপাদান উচ্চতার গণনা অ্যালগরিদমগুলির প্রকৃতি কোনও উপাদানকে তার পিতামাতার অভ্যন্তরে উল্লম্বভাবে কেন্দ্রের জন্য মার্জিনগুলি ব্যবহার করা অসম্ভব করে তোলে। যখনই একটি উল্লম্ব মার্জিনের মান পরিবর্তন করা হয়, এটি একটি মূল উপাদান উচ্চতার পুনঃ গণনা (পুনরায় প্রবাহ )কে ট্রিগার করবে, যার ফলে এটি মূল উপাদানটির পুনরায় কেন্দ্রকে ট্রিগার করবে ... এটি একটি অসীম লুপ তৈরি করবে।

তুমি ব্যবহার করতে পার:

এটির মতো কয়েকটি কাজের ক্ষেত্র যা আপনার দৃশ্যের জন্য কাজ করে; তিনটি উপাদান যেমন বাসাতে হবে:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

জেএসফিডাল ব্রাউজারশট অনুসারে কাজ করে।

Comments

#নিয়মটি কেবল আই 7 এবং এর অধীনে ব্যাখ্যার সাথে অনুজ্ঞাযুক্ত করার একটি হ্যাক। আপনি শর্তাধীন মন্তব্য ইত্যাদি ব্যবহার করে কোনও আই-নির্দিষ্ট স্টাইলশিটে এই বিধিগুলি অন্তর্ভুক্ত করতে পছন্দ করতে পারেন

— ওভ

এটির কারণগুলির কারণ উল্লেখ করে +1, প্রস্থের উপর ভিত্তি করে মার্জিন শতাংশের গণনা খুব চোখের খোলা ছিল।

— রিকোসরম

আমি 'অসীম লুপ' বিবৃতি সম্পর্কে সন্দেহ করি।

— বরুন

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

— জেসুস

>> position: absolute; top: 50%; transform: translateY(-50%);top:50%;margin: - $halfHeight

— আইই

Answer 2

যেহেতু এই প্রশ্নটি ২০১২ সালে জিজ্ঞাসা করা হয়েছিল এবং আমরা ফ্লেক্সবক্সগুলির জন্য ব্রাউজার সমর্থন নিয়ে দীর্ঘ পথ পাড়ি দিয়েছি বলে মনে হয়েছিল যেন এই উত্তরটি বাধ্যতামূলক।

আপনার বাবা-মা ধারক প্রদর্শনের হয়, তাহলে flex, তারপর হ্যাঁ , margin: auto auto(এছাড়াও হিসাবে পরিচিত margin: auto) অনুভূমিকভাবে এবং উল্লম্বভাবে এটি উভয় কেন্দ্রে, কাজ করবে নির্বিশেষে যদি এটি একটি হল inlineবা blockউপাদান।

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

নোট করুন যে প্রস্থ / উচ্চতাটি একেবারে নির্দিষ্ট করতে হবে না, যেমন উদাহরণস্বরূপ জিফডল যা ভিউপোর্টের সাথে সম্পর্কিত আকারের ব্যবহার করে।

পোস্টিংয়ের সময় ফ্লেক্সবক্সগুলির জন্য ব্রাউজার সমর্থন সর্বকালের উচ্চতায় থাকলেও, অনেক ব্রাউজার এখনও এটি সমর্থন করে না বা বিক্রেতার উপসর্গের প্রয়োজন নেই। পড়ুন http://caniuse.com/flexbox আপডেট ব্রাউজার সমর্থনের তথ্যের জন্য।

হালনাগাদ

যেহেতু এই উত্তরটি খানিকটা মনোযোগ পেয়েছে, আমি এটিও উল্লেখ করতে চাই marginযে আপনি যদি ব্যবহার করছেন এবং ধারকটিতে থাকা সমস্ত display: flexউপাদানকে কেন্দ্র করে রাখতে চান তবে আপনাকে এগুলি নির্দিষ্ট করার দরকার নেই :

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Comments

অভিভাবক {প্রদর্শন: ফ্লেক্স; } শিশু {মার্জিন: অটো 0; simply কেবল দুর্দান্ত।

— আরেক কোস্টরজেবা

ওএমজি ডুড, তুমি রকস্টার মানুষ, অভিশাপ আমি তোমাকে একাধিকবার উপড়ে ফেলতে পারি না !!!

— পাইরেটএপ

আপনি যখন ফিট-কন্টেন্ট সমস্যার সাথে বিভ্রান্তও হতে পারেন তখন এটি একটি উত্তরের উত্তর। ধারকটিতে ফ্লেক্স সেট করে, সামগ্রী ডিভ সেট করার জন্য কোনও বৈশিষ্ট্যের প্রয়োজন হয় না।

— এরিক

এটি এখন পর্যন্ত 2018 এ কাজ করার সেরা এবং মার্জিত সমাধান, আপনাকে ধন্যবাদ।

— সিলভারসার্ফার

আমি যোগ করতে চাই, মে 2018 এর হিসাবে এই সমাধানটি সহ, টেক্সটটি আইই 11 তে উলম্বভাবে সারিবদ্ধ হবে না

— ইয়েফু

Answer 3

এখানে আমি খুঁজে পেয়েছি সেরা সমাধান: http://jsfiddle.net/yWnZ2/446/ ক্রোম, ফায়ারফক্স, সাফারি, আইই 8-11 এবং এজ এ কাজ করে।

আপনি যদি একটি ঘোষণা করেছেন এমন height( height: 1em, height: 50%ইত্যাদি) অথবা এটি একটি উপাদান যেখানে ব্রাউজার উচ্চতা জানে ( img, svg, অথবা canvasউদাহরণস্বরূপ), তারপর সব উল্লম্ব কেঁদ্রীকরণ জন্য প্রয়োজন, তা হল:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

আপনি সাধারণত একটি widthবা max-widthতাই নির্দিষ্ট করতে চাইবেন যাতে সামগ্রীটি স্ক্রিন / ধারকটির পুরো দৈর্ঘ্য প্রসারিত করে না।

আপনি যদি এমন কোনও মডেলের জন্য ব্যবহার করেন যা আপনি সবসময় ভিউপোর্টে অন্যান্য সামগ্রীকে ওভারল্যাপ করে কেন্দ্রীভূত করতে চান তবে position: fixed;পরিবর্তে উভয় উপাদানগুলির জন্য ব্যবহার করুন position: absolute। http://jsfiddle.net/yWnZ2/445/

এখানে আরও একটি সম্পূর্ণ লেখার ব্যবস্থা রয়েছে: http://codepen.io/shshaw/pen/gEiDt

Comments

এটি অগত্যা এটির মূল উপাদানটিকে কেন্দ্র করে না। আপনি কেবল পৃষ্ঠার কেন্দ্রে চাইলে দুর্দান্ত হ্যাক।

— জোয়েল মেলন

কেবল position: relativeপিতামাতাকে যুক্ত করুন, এবং উপাদানটি পিতামাতার মধ্যে কেন্দ্রিক হবে। আপনি আরও পড়তে চাইলে কৌশলটি সম্পর্কে স্ম্যাশিং ম্যাগাজিনে আমি আরও বৃহত্তর লিখনআপ করেছি

— 2013

কখনও কখনও নিখুঁত একটি পিতামাতার উপর ভিত্তি করে বা দুই আপ (বনাম শরীর) এবং আত্মীয় একটি পিতামহ বা মহান পিতামহ হতে পারে (বনাম পিতামাতার) সম্ভবত যারা জানেন বা কখন ঘটে থাকে তারা এই কৌশলটি আরও ভালভাবে নিয়ন্ত্রণ করতে পারেন - আমি সত্যিই কখনই এই বিষয়গুলি দেখিনি তবে আমি জানি যে নিখুঁত থেকে আপেক্ষিকের কাছে যাওয়া এই কাজটি করার কোনও সমাধান নয়। আমি আপনার নিবন্ধটি কিছুটা পড়েছি এবং দেখে মনে হচ্ছে পরম এবং আপেক্ষিক প্রথম পরম বা আপেক্ষিক পূর্বপুরুষের কাছে যায়, এটি কি সঠিক?

— জোয়েল মেলন

আমি কিছুটা ধীর। আমি আপনার উপরের মন্তব্যটি কেবল পুনরায় পড়ি। আপনি এটিতে যোগ করার কথা বলেছিলেন তা আমি খেয়াল করি নি parent- পেয়েছি। অনেক ধন্যবাদ!

— জোয়েল মেলন

@ কম্পনপাইক আইই 8/9 এর একমাত্র সমস্যা হ'ল আপনি যদি display: tableভেরিয়েবল উচ্চতার সামগ্রীর জন্য ব্যবহার করেন । অন্যথায়, এই পদ্ধতিটি প্রত্যাশার মতো কাজ করা উচিত। সামগ্রিকভাবে আরও বিশদের জন্য লেখার মাধ্যমে পড়ুন । কোনও সমস্যা আছে কিনা তা দেখার জন্য আপনার IE8 / 9 এ সম্পূর্ণ দর্শনটি পরীক্ষা করতে সক্ষম হওয়া উচিত ।

— শো

Answer 4

সম্পাদনা করুন: এটি ২০২০ এর পরিবর্তে আমি ফ্লেক্স বক্সটি ব্যবহার করব।

আসল উত্তর:

এইচটিএমএল

<body>
  <div class="centered">
  </div>
</body>

সিএসএস

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

Comments

IE 8 এবং এর পুরানো সংস্করণের জন্য কাজ করবে না। যেহেতু রূপান্তর প্রাইম্যটিটি 9.0 সংস্করণ এবং পরবর্তী সংস্করণ থেকে (উপসর্গ-মেস- সহ) সমর্থিত। (উদাঃ 10 এর আর কোনও উপসর্গের দরকার নেই)।

— DevWL

সত্য, আমি আইই 8

— গাল মার্সালিট

এবং লেখক তার প্রশ্নের জন্য এইচটিএমএল 5 ট্যাগ করেছেন

— Gal

Answer 5

আমি জানি প্রশ্নটি ২০১২ সালের, তবে আমি এখন পর্যন্ত সবচেয়ে সহজতম উপায় খুঁজে পেয়েছি এবং আমি ভাগ করে নিতে চাই।

এইচটিএমএল:

<div id="parent">
     <div id="child">Content here</div>
</div>

এবং সিএসএস:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Answer 6

আপনি যে ডিভটি কেন্দ্র করতে চান তার উচ্চতাটি যদি আপনি জানেন তবে আপনি একে একে তার পিতামাতার মধ্যে স্থাপন করতে পারেন এবং তারপরে topমানটি সেট করতে পারেন 50%। এটি সন্তানের ডিভেন্ড এর পিতামাতার 50% উপরে রাখবে, অর্থাত্ খুব কম। এটি সেট করে এটি আবার টানুনmargin-topএর উচ্চতা অর্ধেক । সুতরাং এখন আপনার পিতামাতার উল্লম্ব মিডপয়েন্টে বসে শিশু ডিভের উল্লম্ব মিডপয়েন্ট রয়েছে - উল্লম্বভাবে কেন্দ্রীভূত!

উদাহরণ:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Comments

margin-topউপাদানটির উচ্চতার তুলনায়% তে সেট করা যায় না, সুতরাং আপনি একটি মাত্রা নির্ভর নির্ভর স্থির করে শেষ করবেন

— ও

কোনটি ... আমি আমার উত্তরে ঠিক কী বলেছিলাম? "আপনি যদি ডিভের উচ্চতা জানেন তবে আপনি কেন্দ্র করতে চান"। এবং আমি বলিনি যে ওপিতে%% ব্যবহার করা উচিত margin-top।

— টফ

সমাধানটির সাথে আমি একমত নই কারণ এটি আপনাকে পূর্বনির্ধারিত উপাদান উচ্চতায় লক করে - তবে আপনার মন্তব্যটি অর্থবোধ করে। আপনি উত্তরে এটি

— প্রতিবিম্বিত

ঠিক আছে, আপনি যে অংশটিকে উপেক্ষা করেছেন সেই অংশটি আমি সাহসী করেছি, আশা করি এটি এখন আরও পরিষ্কার।

— টফ

@ov: যদি উপাদানটির একটি নির্দিষ্ট উচ্চতা না থাকে তবে আপনি কেবল গণনা করা উচ্চতা পেতে জেএস ব্যবহার করতে পারেন এবং তারপরে সেই অনুযায়ী নেতিবাচক শীর্ষের মার্জিন সেট করতে পারেন। আমার মতে এটি এখনও উল্লম্বভাবে কেন্দ্রীভূত করার জন্য সেরা পদ্ধতি।

— daGUY

Answer 7

এই দুটি সমাধানের জন্য কেবল দুটি নেস্টেড উপাদান প্রয়োজন।
প্রথম - বিষয়বস্তু স্থিতিশীল (ম্যানুয়াল কেন্দ্র) হলে আপেক্ষিক এবং পরম অবস্থান ।

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

বা তরল নকশার জন্য - পরিবর্তে নীচের উদাহরণের জন্য সঠিক সামগ্রী কেন্দ্রের জন্য ব্যবহার করুন:

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

https://jsfiddle.net/GlupiJas/w3jnjuv0/

বিষয়বস্তু উইন্ডোর উচ্চতার 50% ছাড়িয়ে যাওয়ার ক্ষেত্রে আপনাকে 'মিনিম-উচ্চতা' সেট করতে হবে। আপনি মোবাইল এবং ট্যাবলেট ডিভাইসগুলির জন্য মিডিয়া ক্যোয়ারির সাহায্যে এই উচ্চতাটিও হেরফের করতে পারেন। তবে আপনি যদি প্রতিক্রিয়াশীল ডিজাইনের সাথে খেলেন তবেই।

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

দ্বিতীয়ত - যদি সামগ্রীটি তরল হয় তবে আপনি উল্লম্ব সারিবদ্ধকরণ এবং টেক্সট-সারিবদ্ধ কেন্দ্রীকরণ সহ টেবিল এবং টেবিল-সেল সিএসএস বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন:

/*in a wrapper*/  
display:table;   

এবং

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

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

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

আমি সঠিক বিষয়বস্তু কেন্দ্রিককরণের জন্য সারণী সমাধানটি পছন্দ করি তবে কিছু ক্ষেত্রে আপেক্ষিক নিরঙ্কুশ অবস্থানটি আরও ভাল কাজ করবে বিশেষত আমরা যদি সামগ্রীতে প্রান্তিককরণের সঠিক অনুপাত রাখতে চাই না।

Answer 8

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

Comments

আপনি কি দয়া করে আমাদের সাথে ভাগ করে নিতে পারেন, এই সমাধানটি কেমন? এছাড়াও, আমি নীচে আপনার "পপআপ বার্তা" দেখছি না

— অ্যালেক্স

আমি কিছু মিস করেছি তবে এখন ডিভটি উল্লম্বভাবে মাঝখানে রাখার জন্য এটি পরিশ্রুত। আপনি এখন চেক করতে পারেন।

— সীটপাল সিং

Answer 9

উল্লম্বভাবে ডিভিকে কেন্দ্র করার একটি সহজ উপায় নেই যা প্রতিটি পরিস্থিতিতে কৌশলটি করে।

তবে পরিস্থিতির উপর নির্ভর করে এটি করার প্রচুর উপায় রয়েছে।

তাদের মধ্যে কয়েকটি এখানে রয়েছে:

• প্যাডিংয়ের জন্য প্যারেন্ট উপাদানটির শীর্ষ এবং নীচের প্যাডিং সেট করুন: 20px 0px 20px 0px
• টেবিল, টেবিল সেল এর 'সামগ্রীটি উল্লম্বভাবে কেন্দ্র করে Use
• অভিভাবক উপাদানটির অবস্থান আপেক্ষিক সেট করুন এবং ডিভের আপনি উল্লম্বভাবে নিখুঁতভাবে কেন্দ্র করতে চান এবং এটিকে শীর্ষ হিসাবে স্টাইল করুন: 50px; নীচে: 50px; উদাহরণ স্বরূপ

আপনি "সিএসএস ভার্টিকাল সেন্টারিং" এর জন্যও গুগল করতে পারেন

Answer 10

পরিবর্তনশীল উচ্চতা, মার্জিন শীর্ষ এবং নীচে স্বয়ংক্রিয় auto

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

পরিবর্তনশীল উচ্চতা, মার্জিন শীর্ষ এবং নীচে স্বয়ংক্রিয় auto

Answer 11

ফ্লেক্সবক্স ব্যবহার:

এইচটিএমএল:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

সিএসএস:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

ফলাফল দেখুন

Answer 12

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>