CSS দিয়ে সেন্ট্রাল, হরিজন্টাল এবং ভার্টিক্যাল অ্যালাইনমেন্ট

CSS ব্যবহার করে একটি এলিমেন্ট বা তার ভেতরের কন্টেন্টকে অ্যালাইন করা যায়। CSS এলিমেন্ট এবং এর কন্টেন্টকে হরিজন্টালি, ভার্টিক্যালি বা সেন্ট্রালি অ্যালাইন করার বিভিন্ন অপশন প্রদান করে।

হরিজন্টাল অ্যালাইনমেন্ট

• ইনলাইন এলিমেন্টস

  টেক্সট, অ্যাঙ্কর, স্প্যান ইত্যাদি ইনলাইন বা ইনলাইন-ব্লক এলিমেন্টগুলো CSS text-align প্রোপার্টি ব্যবহার করে হরিজন্টালি অ্যালাইন করা যায়।

• ব্লক-লেভেল এলিমেন্টস

  div, p ইত্যাদি ব্লক-লেভেল এলিমেন্টগুলো CSS margin প্রোপার্টি ব্যবহার করে হরিজন্টালি অ্যালাইন করা যায়, তবে এলিমেন্টের ওয়ิดথ 100% না হলে (প্যারেন্টের সাপেক্ষে) অন্যথায় এটি অ্যালাইনমেন্টের প্রয়োজন নেই।

• ফ্লোট বা পজিশন স্কিম ব্যবহার করে ব্লক-লেভেল এলিমেন্টস

  এলিমেন্টগুলো CSS float প্রোপার্টি ব্যবহার করে হরিজন্টালি অ্যালাইন করা যায় যা একাধিক এলিমেন্টকে বাম/ডানে অ্যালাইন করে (সেন্টারে না) অথবা CSS পজিশনিং স্কিমের absolute মেথড ব্যবহার করে।

উদাহরণ

CSS হরিজন্টাল অ্যালাইনমেন্টের উদাহরণ:

<!DOCTYPE html> <html> <head> <title>CSS Horizontal Alignment</title> <style> .screen {    padding: 10px;    width: 70%;    margin: 0 auto;    background-color: #f06d06;    text-align: center;    color: white;    border-radius: 0 0 50px 50px;    border: 4px solid #000; } .seats span, .backSeats div{    margin: 10px;    padding: 10px;    color: white;    border: 4px solid #000; } .seats span{    width: 120px;    display: inline-block;    background-color: #48C9B0; } .left{    text-align: left; } .right{    text-align: right; } .center{    text-align: center; } .seats{    text-align: center; } .backSeats div {    background-color: #dc3545; } .leftFloat{    float: left; } .rightAbsolute{    position: absolute;    right: 150px; } </style> </head> <body> <div class="screen">Screen</div> <div class="seats"> <span class="left">Adam</span> <span class="center">Martha</span> <span class="right">Samantha</span> <div class="backSeats"> <div class="leftFloat">Premium 1</div> <div class="leftFloat">Premium 2</div> <div class="rightAbsolute">Premium 3</div> </div> </div> </body> </html>

আউটপুট

এটি নিম্নলিখিত আউটপুট তৈরি করবে:

ভার্টিক্যাল অ্যালাইনমেন্ট

• ইনলাইন এলিমেন্টস

  টেক্সট, অ্যাঙ্কর ইত্যাদি ইনলাইন বা ইনলাইন-ব্লক এলিমেন্টগুলো CSS padding, CSS line-height, বা CSS vertical-align প্রোপার্টি ব্যবহার করে ভার্টিক্যালি অ্যালাইন করা যায়।

• ব্লক-লেভেল এলিমেন্টস

  div, p ইত্যাদি ব্লক-লেভেল এলিমেন্টগুলো CSS margin প্রোপার্টি, CSS flex প্রোপার্টি CSS align-items সহ, অথবা পজিশনিং স্কিম মেথড absolute CSS transform প্রোপার্টি সহ ব্যবহার করে ভার্টিক্যালি অ্যালাইন করা যায়।

উদাহরণ

CSS ভার্টিক্যাল অ্যালাইনমেন্টের উদাহরণ:

<!DOCTYPE html> <html> <head> <title>CSS Horizontal Alignment</title> <style> .screen {    padding: 10px;    width: 70%;    margin: 0 auto;    background-color: #f06d06;    text-align: center;    color: white;    border-radius: 0 0 50px 50px;    border: 4px solid #000; } .seats span:not(.withPadding){    margin: 10px;    padding: 10px;    color: white;    border: 4px solid #000; } .seats span:not(.vertical){    height: 40px;    display: inline-block;    background-color: #48C9B0; } .withPadding{    padding: 20px 20px 0px;    height: 20px;    color: white;    border: 4px solid #000; } .vertical{    display: inline-table;    background-color: #48C9B0;    height: 40px; } .verticalText {    display: table-cell;    vertical-align: middle; } .withLineHeight{    line-height: 40px; } .seats{    text-align: center; } .backLeftSeat{    background-color: #dc3545;    max-height: 100px;    height: 70px;    margin: 20px;    width: 300px;    display: inline-block;    position: relative;    resize: vertical;    overflow: auto;    border: 4px solid #000; } .withPosition{    position: absolute;    top: 50%;    left: 2px;    right: 2px;    color: white;    padding: 20px;    transform: translateY(-50%); } .backRightSeats{    height: 122px;    width: 800px;    float: right;    display: inline-flex;    flex-direction: row;    justify-content: center;    align-items: center; } .withFlex {    background-color: #dc3545;    border: 4px solid #000;    margin-right: 10px;    color: white;    padding: 20px; } </style></head> <body> <div class="screen">Screen</div> <div class="seats"> <span class="withPadding">Adam</span> <span class="withLineHeight">Martha</span> <span class="vertical"><p class="verticalText">Samantha</p></span> <div> <div class="backLeftSeat"> <div class="withPosition">Premium Readjustable Sofa</div> </div> <div class="backRightSeats"> <div class="withFlex">Premium Solo 1</div> <div class="withFlex">Premium Solo 2</div> <div class="withFlex">Premium Solo 3</div> </div> </div> </body> </html>

আউটপুট

এটি নিম্নলিখিত আউটপুট তৈরি করবে:

যখন div অ্যাডজাস্ট করা হয়নি:

যখন div অ্যাডজাস্ট করা হয়:

সেন্ট্রাল অ্যালাইনমেন্ট

এলিমেন্টগুলো হরিজন্টাল এবং ভার্টিক্যাল অ্যালাইনমেন্টে উল্লিখিত মেথডগুলো ব্যবহার করে সেন্ট্রালি অ্যালাইন করা যায়।