সংজ্ঞায়িত প্রস্থ / উচ্চতা সহ কোনও ডিভের সামগ্রীর কেন্দ্রে উল্লম্বভাবে সারিবদ্ধ করা যায়?

Question 1

সংজ্ঞায়িত প্রস্থ / উচ্চতায় যে কোনও সামগ্রী উল্লম্বভাবে কেন্দ্র করার সঠিক পদ্ধতি কী হবে div।

ইন উদাহরণস্বরূপ বিভিন্ন উচ্চতা দুই বিষয়বস্তু আছে, উল্লম্বভাবে উভয় শ্রেণী ব্যবহার কেন্দ্র করার সেরা উপায় কি .content। (এবং এটি প্রতিটি ব্রাউজারের জন্য এবং এর সমাধান ছাড়াই কাজ করে table-cell)

মনে কিছু সমাধান আছে, কিন্তু অন্যান্য ধারণা জানতে চান, একটি ব্যবহার করছে position:absolute; top:0; bottom: 0;এবং margin auto।

Question 2

আমি এটির একটি সামান্য গবেষণা করেছি এবং যা আমি পেয়েছি তা থেকে আপনার কাছে চারটি বিকল্প রয়েছে:

সংস্করণ 1: টেবিল-ঘর হিসাবে প্রদর্শন সহ পিতামাতার ডিভ

আপনি যদি display:table-cellআপনার পিতামাতার ডিভিতে এটি ব্যবহার করতে আপত্তি করেন না , আপনি নিম্নলিখিত বিকল্পগুলি ব্যবহার করতে পারেন:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

সরাসরি নমুনা

সংস্করণ 2: ডিসপ্লে ব্লক এবং সামগ্রী প্রদর্শনের টেবিল-সেল সহ পিতামাতার ডিভ

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}

সরাসরি নমুনা

সংস্করণ 3: পিতামাতার ডিভিটি ভাসমান এবং প্রদর্শন টেবিল-সেল হিসাবে সামগ্রী ডিভ

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}

সরাসরি নমুনা

সংস্করণ 4: সামগ্রীর অবস্থানের সাথে নিখুঁত সাথে পিতামাতার ডিভ অবস্থান

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

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}

সরাসরি নমুনা

Question 3

এটি display: flexকেবল কয়েকটি লাইনের কোড ব্যবহার করেও করা যেতে পারে । এখানে একটি উদাহরণ:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

সরাসরি নমুনা

Question 4

আমি এই নিবন্ধে এই সমাধানটি খুঁজে পেয়েছি

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

যদি উপাদানটির উচ্চতা নির্ধারণ না করা হয় তবে এটি কবজির মতো কাজ করে।

Question 5

ডিভের বিষয়বস্তুটিকে উল্লম্বভাবে কেন্দ্র করার জন্য সহজ কৌশলটি হ'ল লাইনের উচ্চতাটিকে উচ্চতার হিসাবে সমান করা:

<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}

তবে এটি কেবলমাত্র এক লাইনের পাঠ্যের জন্য কাজ করে!

সেরা পন্থাটি দ্বিগুণ হিসাবে ধারক হিসাবে এবং এর মান সহ একটি স্প্যান থাকে:

.cont {
  width: 100px;
  height: 30px;
  display: table;
}

.val {
  display: table-cell;
  vertical-align: middle;
}

    <div class="cont">
      <span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
    </div>

Question 6

মার্জিন: all_four_margin

All_four_margin কে 50% সরবরাহ করে উপাদানটিকে কেন্দ্রে রাখবে

style="margin: 50%"

আপনি এটি অনুসরণ করার জন্য আবেদন করতে পারেন

মার্জিন: উপরের ডান নীচে বাম

মার্জিন: উপরের ডান এবং বাম নীচে

মার্জিন: উপরের এবং নীচে ডান এবং বাম

যথাযথ% দিয়ে আমরা যেখানেই চাই উপাদানটি পাই।