কিভাবে দুই <div> তাদের overlapping ছাড়া কেন্দ্রীভূত করতে?

আমি বোতাম আকারে দুটি ডিভি উপাদান কেন্দ্র করার চেষ্টা করছি। কিন্তু আমি চেষ্টা কিছুই কাজ মনে হয়। আমি যতদূর দূরে পেয়েছি "মধ্যবর্তী অবস্থানের সাথে" মাঝখানে এটি পাচ্ছি! কিন্তু যখন আমি যে দুটি elemtents একে অপরের উপরে পেতে।

আমি ব্যবহার করছি কোড:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

/* For the button: */

.btn1 {
  color: #000 !important;
  text-transform: uppercase;
  background: #ed1b36;
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 30%;
  transition: all 0.3s ease 50ms;
  text-align: center;
  max-width: 400px;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  right: 0;
  margin: auto;
}


/* For the hover effect: */

.btn1:hover {
  background: #f2d630;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.3s ease 50ms;
  cursor: pointer;
  border-radius: 15px 15px 15px 15px;
}
<div class="btn1">
  Reserveringen
</div>

<div class="btn1"> Logout </div>
</div> </div>

আগাম ধন্যবাদ!

0
আমার সম্পাদনাটি আপনি আসলে ব্যবহার করছেন এমন নির্বাচকদের দেখায় কিনা তা পরীক্ষা করুন।
যোগ লেখক connexo, উৎস
আমি আপনার div এবং আপনার একটি উভয় btn1 ক্লাস দেখতে পাচ্ছি। আপনি আপনার CSS সিলেক্টর হিসাবে এই ক্লাস ব্যবহার করেন? শৈলী উভয় প্রয়োগ করা হবে, কারণ এটা বিপজ্জনক হতে পারে। আমি অনুমান করি কেন তারা একে অপরের উপর চাপিয়ে দেয়, কারণ তাদের অবস্থান: পরম; আছে।
যোগ লেখক OlivierH, উৎস
আপনি একটি কাজের উদাহরণ যোগ করতে পারেন? আমরা জানি না আপনার সিএসএস কোন সিলেক্টর ব্যবহার করেছে
যোগ লেখক Wimanicesir, উৎস
আমি আমার সিএসএস বর্গ নির্বাচক btn1 ব্যবহার করেন। আমি একটি থেকে ক্লাস মুছে ফেলা হয়েছে কিন্তু ফলাফল এখনও একই। দুটি <div> উপাদানগুলি এখনও একে অপরের উপরে রয়েছে।
যোগ লেখক LJKimmel, উৎস

5 উত্তর

আপনার একটি অনুভূমিকভাবে একটি কেন্দ্রে div আপনার div কে টেক্সট-অ্যালাইন: কেন্দ্র থাকা উচিত।

Check this fiddle https://jsfiddle.net/03t46hmn

দয়া করে নোট করুন: div এবং একটি এর জন্য একই ক্লাস ব্যবহার করে বিভ্রান্তির সৃষ্টি হতে পারে। যেমন পদ্ধতি এড়াতে চেষ্টা করুন।

0
যোগ
মন্তব্যের জন্য ধন্যবাদ. আমি বর্তমানে টেক্সট-অ্যালাইন ব্যবহার করছি: কেন্দ্রে একটি ভেতরের অংশটি পেতে কেন্দ্র। কিন্তু আমি কিভাবে <div> উপাদানের জন্য একই কাজ করতে চেষ্টা করছি
যোগ লেখক LJKimmel, উৎস

আশাকরি এটা সাহায্য করবে. আমি মার্জিন-ডান: স্বয়ংক্রিয় এবং মার্জিন-বাম: স্বয়ংক্রিয় ব্যবহার করতে এটি BTN1 এর জন্য অনুভূমিকভাবে কেন্দ্র এবং

<�কোড> .btns {   মার্জিন টপ: 50%;   রুপান্তর: translateY (-50%)   } এ

এটি উল্লম্বভাবে কেন্দ্র সারিবদ্ধ

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.btn1 {
  color: #000 !important;
  text-transform: uppercase;
  background: #ed1b36;
  padding: 20px;
  border-radius: 5px;
  display: block;
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 30%;
  transition: all 0.3s ease 50ms;
  text-align: center;
  max-width: 400px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:10px;

}
.btn1:hover {
  background: #f2d630;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.3s ease 50ms;
  cursor: pointer;
  border-radius: 15px 15px 15px 15px;
}

.btns{
  margin-top:50%;
  transform:translateY(-50%)
  }
<div class="btns">
  Reserveringen
  Logout
</div>
</div> </div>
0
যোগ

এটা চেষ্টা কর

এইচটিএমএল

<div class="con">
  <div class="btn1">
    Reserveringen
  </div>
  <div class="btn1">
    Logout
  </div>
</div>

সিএসএস

.con{
  display: flex;
  justify-content: space-between; /* here you can also use space-around or center */
}
.btn1{
  /* style the button as you like */
}
0
যোগ

এটা কি আপনাকে সাহায্য করবে?

Added/Edited: display: block; margin-bottom: 15px;

Removed: position: absolute; top:10%; bottom: 10%; left: 0; right: 0; margin: auto;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.btn1 {
  color: #000 !important;
  text-transform: uppercase;
  background: #ed1b36;
  padding: 20px;
  border-radius: 5px;
  display: block; /* edited */
  border: none;
  text-decoration: none;
  cursor: pointer;
  width: 30%;
  transition: all 0.3s ease 50ms;
  text-align: center;
  max-width: 400px;
  margin-bottom: 15px; /* new */
}
<div>
  Reserveringen
  Logout
</div>
</div> </div>
0
যোগ
আমি এই সমাধানটি ব্যবহার করার চেষ্টা করেছি কিন্তু এটি দুটি <div> উপাদানের পর্দার কেন্দ্রে অবস্থান করে না। অথচ তারা একে অপরের উপরে উঠে আসেনি!
যোগ লেখক LJKimmel, উৎস

হয়তো আপনি প্রতিটি ট্যাগ div শৈলী করা উচিত। প্রতিটি ট্যাগ div জন্য বিভিন্ন বাম সেট করুন। যেমন

<div class="btn1">
  Reserveringen
</div>

<div class="btn1 btn-logout"> Logout </div>

শৈলী:

.btn-logout{
    left: 40%;
}
0
যোগ