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

কোন ওয়েব পেজকে রেস্পন্সিভ ডিজাইন করার জন্য এইচটিএমএল এলিমেন্ট গুলোর অবস্থান নির্ধারণ করা বেশ গুরুত্বপূর্ণ। কোন এইচটিএমএল এলিমেন্ট এর অবস্থান অর্থাৎ align নির্ধারণ করার জন্য সিএসএস এর বেশ কিছু প্রোপার্টি ব্যবহার করা যায়, যেমন - margin, display, text-align, float, position ইত্যাদি।

margin প্রোপার্টি

সিএসএস এর margin প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট এর অবস্থান নির্ধারণ করা যায়।

নিচে একটি উদাহরন দেখুন, যেখানে একটি এইচটিএমএল <div> এলিমেন্ট এর সাথে margin প্রোপার্টি ব্যবহার করে ওয়েব পেজের মাঝখানে প্রদর্শিত করা হয়েছে।

div {
  background-color: red;
  height: 200px;
  width:200px;
  margin-left: auto;
  margin-right: auto;
}

কোড এডিটর

সিএসএস এর margin প্রোপার্টি সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস মার্জিন টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

text-align প্রোপার্টি

সিএসএস এর text-align প্রোপার্টিতে center মান ব্যবহার করে কোন লেখা বা text কে ওয়েব পেজের মাঝখানে প্রদর্শন করা যায়।

text-align: center ব্যবহার করে নিচে একটি উদাহরন দেখুন।

h1 {
   text-align: left;
   }

p {
   text-align: left;
   }

কোড এডিটর

সিএসএস এর text-align প্রোপার্টি সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস লেখার স্টাইল টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

display প্রোপার্টি

সিএসএস এর display প্রোপার্টি, নির্ধারণ করে কোন এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে। সকল এইচটিএমএল এলিমেন্ট এর ই, তাদের প্রকারভেদ এর ওপর নির্ভর করে, একটি default মান বা value আছে।

নিচে একটি উদাহরন দেখুন, যেখানে display ও margin প্রোপার্টি ব্যবহার করে একটি ছবি বা image কে ওয়েব পেজের মাঝখানে প্রদর্শিত করা হয়েছে।

img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
   }

কোড এডিটর

সিএসএস এর display প্রোপার্টি সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস ডিসপ্লে টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

float প্রোপার্টি

সিএসএস এর float প্রপার্টি ব্যবহার করে এইচটিএমএল এলিমেন্ট গুলোকে আনুভূমিক বা horizontaly অর্থাৎ ডানে বা বামে flow বা স্থাপন করা যায়। এই প্রোপার্টি ব্যবহার করে কিন্তু এইচটিএমএল এলিমেন্টগুলোকে কখনো ওপরে বা নিচে নিয়ন্ত্রন করা যায় না।

নিচে একটি উদাহরন দেখুন, যেখানে float প্রপার্টি ব্যবহার করে একটি ছবি বা image কে ডান দিকে প্রদর্শন করা হয়েছে।

img {
   float: right;
   }

কোড এডিটর

সিএসএস এর float প্রোপার্টি সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস ফ্লোটিং টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

বিভিন্ন align প্রোপার্টি