X

X

X

CSS Layout - Horizontal ও Vertical এলাইনমেন্ট


Center elements
horizontally and vertically

কেন্দ্র বরাবর ইলামেন্ট উপস্থাপণ

কোনো ইলামেন্টকে আনুভূমিকভাবে (horizontally ) কেন্দ্র বরারবর উপস্থাপণ করার জন্য উক্ত ইলামেন্টে margin: auto; প্রপার্টি ব্যবহার করতে হবে। তবে এক্ষেত্রে ইলামেন্টের একটি নির্দিষ্ট প্রস্থ নির্ধারণ করে দিতে হবে। নাহলে ইলামেন্ট কেন্দ্র বরাবর আছে নাকি নাই তা বোঝা যাবে না। কেননা সেক্ষেত্রে ইলামেন্ট ধারক ইলামেন্টের পুরো প্রস্থ বরাবর উপস্থাপিত হবে।

আনুভূমিকভাবে কেন্দ্রীয় ইলামেন্ট যখন নির্দিষ্ট প্রস্থ বিশিষ্ট হবে, তখন এর পুরো প্রস্থ কেন্দ্র হতে দুইদিকে সমান দুইভাগে বিভক্ত হবে:

এই ইলামেন্টটি আনুভূমিকভাবে কেন্দ্র বরাবর উপস্থাপিত হয়েছে।

উদাহরণ

<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বি:দ্র: যদি ইলামেন্টের প্রস্থ (width ) property এর মান ১০০% করা হয়, তাহলে এটি কেন্দ্র বরাবর উপস্থাপিত হচ্ছে কি হচ্ছে না তা বোধগম্য হবে না।


ইলামেন্টের টেক্সটকে কেন্দ্রে উপস্থাপণ

কোনো ইলামেন্টের কন্টেন্ট বা তার টেক্সটকে কেন্দ্র বরাবর উপস্থাপণ করার জন্য text-align: center; প্রপার্টি ব্যবহার করতে হবে।

এই টেক্সটি কেন্দ্র বরাবর উপস্থাপিত হয়েছে।

Code Example

<style>
.center {
    text-align: center;
    border: 3px solid green;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ইলামেন্টের কেন্দ্র বরাবর ছবি উপস্থাপণ

কোনো ইলামেন্টের ভিতরে ছবিকে কেন্দ্র বরাবর উপস্থাপণ করার জন্য margin: auto; প্রপার্টি ব্যবহার করতে হবে এবং ইলামেন্টটিকে অবশ্যই block ইলামেন্টে হিসেবে উপস্থাপণ করতে হবে:

নিচের ছবিটি লক্ষ্য করুণ:

Paris

Code Example

<style>
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


position: absolute; প্রপার্টি ব্যবহার করে বাম ও ডানদিকে ইলামেন্ট উপস্থাপণ

খুব সহজ একটি পদ্ধতি হচ্ছে position: absolute; প্রপার্টি ব্যবহার করে কোনো ইলামেন্টের অবস্থান নির্ধারণ করা:

In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

উদাহরণ

<style>
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: Absolute positioned ইলামেন্টসমূহ স্বাভাবিক ইলামেন্টর মত উপস্থাপিত হয় না। এগুলো স্বাভাবিক ইলামেন্টের সাপেক্ষে উপস্থাপিত হয় না, কাজেই একটি ইলামেন্টের উপরে আরেকটি ইলামেন্ট উপস্থাপিত হতে পারে।

টিপস: যখন কোনো ওয়েব পেজে পজিশনড ইলামেন্ট থাকবে অর্থাৎ যদি position প্রপার্টির ব্যবহার কোনো ইলামেন্টের জন্য করে থাকেন, তবে body ইলামেন্টের মার্জিন এবং প্যাডিং অবশ্যই নির্ধারণ করে দিবেন। তা না হলে বিভিন্ন ব্রাউজারে পেজটি বিভিন্নভাবে উপস্থাপিত হতে পারে।

IE8 এবং এর পূর্বের ভার্শনের ব্রাউজারের ক্ষেত্রে আরও কিছু সমস্যা রয়েছে যখন position প্রপার্টি ব্যবহার করা হয়। যেমন, যদি কন্টেইনার ইলামেন্ট নির্দিষ্ট প্রস্থ বিশিষ্ট হয়, এবং ডকুমেন্টে !DOCTYPE declaration ব্যবহার করা না হয়, তবে IE8 এবং তার আগের ভার্শনের ব্রাউজারসমূহে স্বয়ংক্রিয়ভাবে ডানদিকে 17px মার্জিন যুক্ত হয়। এটি মূলত স্ক্রলবার যুক্ত করার জন্য ফাঁকা জায়গা বরাদ্দ করার জন্য হয়ে থাকে। কাজেই সবসময়, প্রতিটি ইলামেন্টের জন্য অবশ্যই !DOCTYPE declaration ব্যবহার করবেন।

Code Example

<style>
body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


float প্রপার্টি ব্যবহার করে বাম ও ডানদিকে ইলামেন্ট উপস্থাপণ

float property ব্যবহার করে বাম ও ডানদিকে ইলামেন্ট উপস্থাপণ করা যায়:

Code Example

<style>
.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

টিপস: যখন কোনো ওয়েব পেজে পজিশনড ইলামেন্ট থাকবে অর্থাৎ যদি float প্রপার্টির ব্যবহার কোনো ইলামেন্টের জন্য করে থাকেন, তবে body ইলামেন্টের মার্জিন এবং প্যাডিং অবশ্যই নির্ধারণ করে দিবেন। তা না হলে বিভিন্ন ব্রাউজারে পেজটি বিভিন্নভাবে উপস্থাপিত হতে পারে।

IE8 এবং এর পূর্বের ভার্শনের ব্রাউজারের ক্ষেত্রে আরও কিছু সমস্যা রয়েছে যখন float প্রপার্টি ব্যবহার করা হয়। যেমন, যদি কন্টেইনার ইলামেন্ট নির্দিষ্ট প্রস্থ বিশিষ্ট হয়, এবং ডকুমেন্টে !DOCTYPE declaration ব্যবহার করা না হয়, তবে IE8 এবং তার আগের ভার্শনের ব্রাউজারসমূহে স্বয়ংক্রিয়ভাবে ডানদিকে 17px মার্জিন যুক্ত হয়। এটি মূলত স্ক্রলবার যুক্ত করার জন্য ফাঁকা জায়গা বরাদ্দ করার জন্য হয়ে থাকে। কাজেই সবসময়, প্রতিটি ইলামেন্টের জন্য অবশ্যই !DOCTYPE declaration ব্যবহার করবেন।

Code Example

<style>
body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উল্লম্বিকভাবে কেন্দ্র ইলামেন্ট উপস্থাপণ

অনেক পদ্ধতি রয়েছে। তবে খুব সাধারণ একটি পদ্ধতি হচ্ছে, padding প্রপার্টির ব্যবহার করা:

এটি একটি উল্লম্বিকভাবে কেন্দ্রীয় ইলামেন্ট।

Code Example

<style>
.center {
    padding: 70px 0;
    border: 3px solid green;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

আনুভূমিক ও উল্লম্ব বরাবর ইলামেন্টকে কেন্দ্র বরাবর উপস্থাপণ করার জন্য, padding ‌ও text-align: center প্রপার্টি একসাথে ব্যবহার করতে হবে:

এটি একটি আনুভূমিক ও উল্লম্বিকভাবে কেন্দ্রীয় ইলামেন্ট।

Code Example

<style>
.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


line-height প্রপার্টি ব্যবহার করে উল্লম্বিকভাবে কেন্দ্র ইলামেন্ট উপস্থাপণ

আরও একটি সহজ পদ্ধতি হচ্ছে line-height property ব্যবহার করা।

I am vertically and horizontally centered.

Code Example

<style>
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


position ও transform প্রপার্টি ব্যবহার করে উল্লম্বিকভাবে কেন্দ্র ইলামেন্ট উপস্থাপণ

এগুলো সিএসএস৩ এর প্রপার্টি। কাজেই পুরোনো ব্রাউজারে সাপোর্ট নাও করতে পারে।

I am vertically and horizontally centered.

Code Example

<style>
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চেষ্টা করুণ!

Exercise 1 »  Exercise 2 »