স্ক্রিনের কেন্দ্রে <ডিভ> উপাদান স্থাপন করা

134

আমি পর্দার আকার নির্বিশেষে পর্দার কেন্দ্রে একটি <div>(বা ক <table>) উপাদানকে অবস্থান করতে চাই । অন্য কথায়, 'শীর্ষ' এবং 'নীচে' এর বাম স্থান সমান হওয়া উচিত এবং 'ডান' এবং 'বাম' পাশের বাম সমান হওয়া উচিত। আমি কেবল সিএসএস দিয়ে এটি সম্পাদন করতে চাই।

আমি নিম্নলিখিত চেষ্টা করেছিলাম কিন্তু এটি কার্যকর হয় না:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

দ্রষ্টব্য: উপাদান (বা ) ওয়েবসাইটের সাথে স্ক্রল করে
কিনা তা <div>কোনওভাবেই ঠিক is <table>পৃষ্ঠাটি লোড হওয়ার পরে এটি কেন্দ্রিক হতে চান।

javascript css html

— সুমিত
সূত্র

1

পৃষ্ঠার মাঝখানে <

— ডিভ

হাই পার্মৌ, আপনি যে প্রশ্নটির উল্লেখ করেছেন পৃষ্ঠার মাঝখানে অবস্থানের জন্য, যেমন বাম এবং ডানদিকে সমান স্থান - উপরে এবং নীচের স্থানটি সমান নয়!

— সামিট

1

সিএসএসের সাথে উল্লম্বভাবে একটি ডিভ

— ডিগ্রি সেন্টারের

সম্ভাব্য সদৃশ একটি div একটি div কেন্দ্র কিভাবে - অনুভূমিকভাবে?

— bjb568

201

সহজ উপায়, যদি আপনার একটি নির্দিষ্ট প্রস্থ এবং উচ্চতা থাকে:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

দয়া করে ইনলাইন শৈলী ব্যবহার করবেন না! এখানে একটি কার্যকারী উদাহরণ http://jsfiddle.net/S5bKq/ ।

— আইনস্টাইন
সূত্র

13

: একটি গতিশীল উচ্চতা চাইছেন তাদের জন্য stackoverflow.com/questions/396145/...

— pulkitsinghal

1

@ woho87 কেন ইনলাইন স্টাইল ব্যবহার করবেন না? সুপরিচিত কারণে বা এর থেকেও আরও কিছু আছে যা নির্দিষ্ট উদাহরণের জন্য আমার জানা উচিত?

— শার্কি

@KatrinRaimond এটা সুপরিচিত কারণে যে, এখানে নথিভুক্ত stackoverflow.com/questions/2612483/... এবং এখানে webdesign.about.com/od/css/a/aa073106.htm ।

— অ্যালেক্স

তবে, ডিভিলিমেটের শীর্ষটিকে '%' ইউনিটে সেট করে ডিভেলমেন্টটি উল্লম্ব স্থান গ্রহণ করে যদি না ডিভএলিমেন্টকে কোনও সম্পর্কিত উপাদানের ভিতরে স্থাপন করা হয়।

— সুদীপ

হয় অবস্থান: স্থির বা অবস্থান: পরম?

— কুরকুলা

151

এই দিনগুলিতে রূপান্তরগুলি সর্বজনীনভাবে সমর্থিত হওয়ার সাথে সাথে আপনি পপআপটির প্রস্থ / উচ্চতা না জেনে এটি করতে পারেন

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

সহজ! জেএসফিডেল এখানে: http://jsfiddle.net/LgSZV/

আপডেট: সিএসএস কেন্দ্রীকরণ সম্পর্কে মোটামুটি সম্পূর্ণ গাইডের জন্য https://css-tricks.com/centering-css-complete-guide/ দেখুন । অনেকটা চোখের ছোঁয়া লাগে বলে মনে হচ্ছে এই উত্তরে এটি যুক্ত করা।

— XwipeoutX
সূত্র

1

যদি পপআপের বিষয়বস্তুগুলি ব্যবহার করা হয় overflow:auto, তবে আই 9 তে স্ক্রোলিং স্ক্রুল করা হবে। :(

— joescii

2

ইউবিকোস না। আইই 8 ব্রাউজারের 20% ভাগ করে এবং এটি সমর্থন করে না । সুতরাং কেবল এটি IE9 + এর জন্য নিন।

— fotanus

7

একমাত্র সমাধান হওয়ার জন্য +1 যেখানে আপনাকে উচ্চতা এবং প্রস্থ নির্দিষ্ট করতে বা জাভাস্ক্রিপ্ট ব্যবহার করতে হবে না।

— জান ডার্ক

@ ফোটানাস যখন ডেভেলপাররা আইই 9 9 কে সমর্থন করা বন্ধ করে দেয় <ব্যবহারকারীগণ হ'ল মাইগ্রেট বা তাদের ব্রাউজার আপডেট করবেন।

— দিয়েগো ভিয়েরা 14

@ ডিয়েগো ভিইরা এটি দুর্ভাগ্যক্রমে বিষয়গুলি কীভাবে কাজ করে তা নয়। কমন্সদের ট্র্যাজেডি দেখুন । সুতরাং লোকেরা IE8 সমর্থন করা অব্যাহত রাখবে কারণ এই ভাগটি হারাতে চান না এবং লোকেরা ব্যবহার চালিয়ে যাবে কারণ এটি কাজ করে।

— ফোটানাস

33

প্রস্থ এবং উচ্চতা নির্ধারণ করুন এবং আপনি ভাল।

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

আপনি যদি উপাদানটির মাত্রাগুলি নমনীয় হতে চান (এবং লিগ্যাসি ব্রাউজারগুলির বিষয়ে চিন্তা করবেন না) তবে এক্সওয়াইপএক্সএক্স এর উত্তরটি নিয়ে যান।

— এরিক অ্যাগনার
সূত্র

1

এটি সবচেয়ে পরিষ্কার এবং সহজ উত্তর এবং মোবাইল বন্ধুত্বপূর্ণও । +1

— মরিচা

22

এটি যে কোনও বস্তুর পক্ষে কাজ করবে। আপনি আকারটি না জানলেও:

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

— luminousmen
সূত্র

17

এইচটিএমএল 5 এবং সিএসএস 3 দিয়ে এখন আরও সহজ:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— ড্যানিয়েল ডি লিয়ন
সূত্র

12

আপনার যদি স্থির divএকমাত্র পরম অবস্থান থাকে তবে এটি শীর্ষ থেকে 50% এ এবং যথাক্রমে 50% বাম এবং নেতিবাচক মার্জিন শীর্ষ এবং অর্ধেক উচ্চতা এবং প্রস্থের বামে। আপনার প্রয়োজন অনুযায়ী সামঞ্জস্য করুন:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
সূত্র

9

ফ্লেক্স ব্যবহার করুন । আপনার divআকার নির্বিশেষে অনেক সহজ এবং কাজ করবে :

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

স্নিপেট প্রসারিত করুন

— Caner
সূত্র

3

আমি সিএসএসে এটি করব:

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

তারপরে এইচটিএমএল:

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

— এডুয়ার্ডো লেগো আগুয়েলার
সূত্র

0

এটা চেষ্টা কর

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

অথবা এটা

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— দলি
সূত্র

0

যদি কেউ সমাধানের সন্ধান করে থাকে,

আমি এটি পেয়েছি,

এটি আমি এখনও খুঁজে পেয়েছি সেরা সমাধান!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

আশা করি তুমি উপভোগ কর!

— ক্রিস্টোফার অ্যাটউড
সূত্র

0

কেন্দ্রে ব্লক প্রদর্শনের জন্য আরেকটি সহজ নমনীয় পদ্ধতির: line-heightএবং এর সাথে নেটিভ পাঠ্য সারিবদ্ধকরণ ব্যবহার করে text-align।

সমাধান:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

এবং এইচটিএমএল নমুনা:

<div class="parent">
  <div class="child">My center block</div>
</div>

আমরা div.parentফুলস্ক্রিন তৈরি করি এবং তার একক শিশু div.childপাঠ্য হিসাবে প্রান্তিককরণ হয় display: inline-block।

সুবিধাদি:

নমনীয়তা, কোন পরম মান
সমর্থন পুনরায় আকার
মোবাইলে সূক্ষ্ম কাজ করে

জেএসফিডেলের সহজ উদাহরণ: https://jsfiddle.net/k9u6ma8g

— পাভেল শোরোখভ
সূত্র

0

বিকল্প সমাধান যা অবস্থানের নিখুঁত ব্যবহার করে না:
আমি অনেকগুলি অবস্থানের নিখুঁত উত্তর দেখতে পাচ্ছি। আমি অন্য কিছু না ভেঙে পজিশন পরম ব্যবহার করতে পারি না। সুতরাং তাদের পক্ষে যা ভাল করতে পারেন নি, আমি এখানে যা করেছি তা এখানে:
https://stackoverflow.com/a/58622840/6546317 (অন্য প্রশ্নের জবাবে পোস্ট করা)।

সমাধানটি কেবল উল্লম্বভাবে কেন্দ্রীকরণের দিকে মনোনিবেশ করে কারণ আমার বাচ্চাদের উপাদানগুলি ইতিমধ্যে অনুভূমিকভাবে কেন্দ্রিক ছিল তবে একইভাবে প্রয়োগ করা যেতে পারে যদি আপনি তাদের অন্যভাবে আনুভূমিকভাবে কেন্দ্র করতে না পারেন।

— reddtoric
সূত্র

-2

এটা চেষ্টা কর:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— user3423956
সূত্র

2

এটি কার্যকরভাবে গৃহীত উত্তর হিসাবে একই

— 21 নভেম্বর 19:19 এপল

হ্যাঁ, তবে এখানে আমি মার্জিনের শীর্ষ এবং বামের ক্রিয়াকলাপটি ব্যাখ্যা করছি ... কেউ এটি জানেন না ....

— ব্যবহারকার 3423956

1

তারপর এটি কার্যকরভাবে হিসাবে একই দ্বিতীয় জবাব

— apaul