সিএসএস এলাইন - Css Align



সিএসএস এর বিভিন্ন প্রপার্টি ব্যবহার করে কোন এলিমেন্টের আনুভূমিক বা horizontal অবস্থান বা aligning নির্ধারণ করা যায়।


ব্লক এলিমেন্ট

একটি ব্লক এলিমেন্ট হল এমন একটি এলিমেন্ট যা width অর্থাৎ ডান ও বাম দিকের সহজলভ্য সমস্ত স্থান দখল করে।

কতগুলো ব্লক এলিমেন্টের উদাহরণ হল -

হেডিং ট্যাগ অর্থাৎ h1, h2, h3 ইত্যাদি,
প্যারাগ্রাফ ট্যাগ অর্থাৎ<p> ... </p>,
ডিভ এলিমেনট অর্থাৎ <div> ... </div> ট্যাগ।


মার্জিন প্রপার্টি ব্যবহার

left margin এবং right margin এর মান 'auto' নির্ধারণ করে ব্লক এলিমেন্টে মাঝ বরাবর বা center এ স্থাপন করা যায়।

নীচে একটি উদাহরণ দেখুন -

কোড দেখুন

.center{
margin-left:auto;
margin-right:auto;
width:800px;
border:2px solid blue;
}


নোট - একটি !DOCTYPE উল্লেখ না করা পর্যন্ত IE8 এবং এর কাছের ভার্সনগুলো 'margin:auto' সমর্থন বা support করে না। IE5 এ ব্লক এলিমেন্টের জন্য margin handling bug আছে।


পজিসন প্রপার্টি

absolute position প্রপার্টি ব্যবহার করে কোন এলিমেন্ট alignin করা যায়। নীচে একটি উদাহরন লক্ষ্য করুন -

কোড দেখুন

.right{
position:absolute;
right:0px;
width:300px;
border:2px solid black;
}


নোট - absolute positionin প্রপার্টি এলিমেন্ট overlap করে।


ক্রস ব্রাউজার কম্পাটিবিলিটি

absolute positionin প্রপার্টি ব্যবহার করলে <body> এলিমেন্টের জন্য পূর্ব থেকেই মার্জিন এবং প্যাডিং প্রপার্টির মান নির্ধারণ করে দেয়া উচিৎ, কারন এতে করে বিভিন্ন ব্রাউজারে কন্টেন্টগুলোর অবস্থান একই রকম দেখাবে।

absolute position ব্যবহারের ক্ষেত্রে IE8 এবং এর কাছের ভার্সনগুলোয় একটি সমস্যা রয়েছে। যদি কোন কন্টেইনার এলিমেন্টের( এই উদাহরণে <div id="container">...</div>) নির্দিষ্ট width থাকে এবং ডকটাইপ উল্লেখ করা না হয়, IE8 এবং এর কাছের ভার্সনগুলো এলিমেন্টের ডান দিকে 17px মার্জিন স্বয়ংক্রিয়ভাবে যুক্ত করে। তাই সবসময় একটি ডকটাইপ ডিকক্লারেশন করা উচিৎ।

সব ব্রাউজারে একই রকম প্রদর্শনের জন্য নীচে একটি উদাহরণ দেখুন -

কোড দেখুন

body{
margin:0;
padding:0;
}
#container{
position:relative;
width:100%;
}
.right{
position:absolute;
right:0px;
width:300px;
border:2px solid black;
}




ফ্লোট প্রপার্টি

ফ্লোট প্রপার্টি ব্যবহার করে এলিমেন্ট স্থাপন বা aligning করা যায়। নীচে একটি উদাহরণ দেখুন -

কোড দেখুন

.right{
float:right;
width:300px;
border:2px solid black;
}




ক্রস ব্রাউজার কম্পাটিবিলিটি

ফ্লোট প্রপার্টি ব্যবহার করলে <body> এলিমেন্টের জন্য পূর্বথেকেই মার্জিন এবং প্যাডিং প্রপার্টির মান নির্ধারণ করে দেয়া উচিৎ, কারন এতে করে বিভিন্ন ব্রাউজারে কন্টেন্টগুলোর অবস্থান একই রকম দেখাবে।

absolute position ব্যবহারের ক্ষেত্রে IE8 এবং এর কাছের ভার্সনগুলোয় একটি সমস্যা রয়েছে। যদি কোন কন্টেইনার এলিমেন্টের( এই উদাহরণে <div id="container">...</div>) নির্দিষ্ট width থাকে এবং ডকটাইপ উল্লেখ করা না হয়, IE8 এবং এর কাছের ভার্সনগুলো এলিমেন্টের ডান দিকে 17px মার্জিন স্বয়ংক্রিয়ভাবে যুক্ত করে। তাই সবসময় একটি ডকটাইপ ডিকক্লারেশন করা উচিৎ।

সব ব্রাউজারে একই রকম প্রদর্শনের জন্য নীচে একটি উদাহরণ দেখুন -

কোড দেখুন

body{
margin:0;
padding:0;
}
.right {
float:right;
width:300px;
border:2px solid black;
}








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.