একেবারে অবস্থিত উপাদানকে কেন্দ্রে বিন্যস্ত করবেন?

Question

আমি একসাথে দুটি ক্যানভাস স্ট্যাক করে এটিকে একটি দ্বৈত স্তর ক্যানভাস করার চেষ্টা করছি।

আমি এখানে একটি উদাহরণ দেখেছি:

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

তবে আমি উভয় ক্যানভাসটি স্ক্রিনের কেন্দ্রবিন্দুতে সেট করতে চাই। যদি আমি leftএকটি ধ্রুবক হিসাবে মান সেট করি , আমি যখন স্ক্রিনের ওরিয়েন্টেশন পরিবর্তন করি (যেমন আমি আইপ্যাডে অ্যাপস করছি) ক্যানভাসটি স্ক্রিনের মাঝখানে থাকবে না যেমন এটি কীভাবে কাজ করে

<div align="center">

দয়া করে কেউ সাহায্য করতে পারেন?

Answer 1

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

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

Comments

আপনারও কি উপাদানটিকে প্রস্থ দেওয়ার দরকার নেই?

— গ্যাব্রিয়েল ফ্লোরিট

আমি মনে করি না যে এটি এক্ষেত্রে প্রয়োজনীয়।

— অ্যান্ড্রু

কেবল এটি চেষ্টা করে দেখুন এটি কার্যকর হয়েছে, এটি সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত

— আর রেভলি

কেন্দ্রটিকে বাইরে রেখে, বাম বা ডান মান পরিবর্তন করতে ব্যবহার করতে পারেন। ব্যবহার left: 80px;কেন্দ্র ডানদিকে বস্তুর 40px (!) স্থানান্তরিত হবে।

— এসপিআরবিএনএন

মন্তব্য: স্টাইলযুক্ত উপাদানটির প্রদত্ত প্রস্থ থাকলে কেবলমাত্র কাজ করে। (হয় px বা%)

— জনি ওয়াং

Answer 2

আপনি যদি কোনও উপাদান এর প্রস্থ এবং উচ্চতা না জেনে বিন্যস্ত করতে চান তবে:

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

উদাহরণ:

*{
  margin:0;
  padding:0;
}
section{
  background:red;
  height: 100vh;
  width: 100vw;
}
div{  
  width: 80vw;
  height: 80vh;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section>
  <div>
    <h1>Popup</h1>
  </div>
</section>

Answer 3

আপনি কি ব্যবহার করার চেষ্টা করেছেন ?:

left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

এটি কাজ করবে কিনা তা নিশ্চিত নয় তবে এটি চেষ্টা করার মতো ...

গৌণ সম্পাদনা : প্রান্তিকের বাম অংশ যুক্ত হয়েছে, যেমন চেতনের মন্তব্যে নির্দেশিত হয়েছে ...

Comments

ইয়া আমি এটি চেষ্টা করেছি, তবে ক্যানভাসটি মধ্য থেকে "শুরু" তবে পর্দার মাঝখানে "স্থাপন" নয় placed বাম সেট করার জন্য কি এখনও আছে: 50% এবং ক্যানভাসটি আবার বামে সরানো হয়?

— পললিং

@ পললিংmargin-left: <negative half the width>

— চেতন এস

চেতন যা বলেছিল .. আমাকে এর কাছে মারবে: পি আমি আমার প্রতিক্রিয়া ভবিষ্যতের প্রজন্মের জন্য সম্পাদনা করব ...

— ডিলিটম্যান

আইপ্যাডকে বিভিন্ন দিকনির্দেশে স্থাপন করা হলে পর্দার প্রস্থ আলাদা হয়

— পললিং

তার অর্থ আপনার ক্যানভাস উপাদানটির অর্ধ প্রস্থ ..., এটি এটিকে মার্জিন-বামে পরিণত করবে: -50px;

— ডিলিটম্যান

Answer 4

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

Answer 5

এই পদ্ধতিটি চেষ্টা করে দেখুন, আমার পক্ষে কাজ করছেন

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

Answer 6

আপনাকে যা করতে হবে তা হ'ল

আপনার পিতামাতার ডিআইভির অবস্থান রয়েছে তা নিশ্চিত করুন: আপেক্ষিক

এবং যে উপাদানটি আপনি কেন্দ্র করতে চান সেটি একটি উচ্চতা এবং প্রস্থ নির্ধারণ করুন। নিম্নলিখিত সিএসএস ব্যবহার করুন

.layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
  }
http://jsbin.com/aXEZUgEJ/1/

Comments

আমার জন্য কাজ করে এমন একমাত্র সমাধান। পিতামাতাকে নমনীয়তা, ফ্লেক্স-বৃদ্ধি এবং ওভারফ্লোতে সেট করা হয়েছে। সন্তানের পিতামাতার চেয়ে বড় চিত্রগুলির জন্য ফ্রেমের বাইরে রাখা হয়েছিল। এটি পিতামাতার প্রস্থ সম্পর্কে সচেতন বলে মনে হয় নি। এটি এখন স্থির। অনেক ধন্যবাদ!

— কাই

Answer 7

এর সাথে পিতামাতার ডিভটি মাঝখানে সরান

left: 50%;
top: 50%;
margin-left: -50px;

সঙ্গে দ্বিতীয় স্তরটি অন্যটির সাথে সরান

position: relative;
left: -100px;