CSS vertical-align প্রপার্টি ইনলাইন বা টেবিল-সেল এলিমেন্টগুলোর লম্বাকার সারিবদ্ধতা (vertical alignment) নিয়ন্ত্রণ করে।
সিনট্যাক্স
vertical-align: property-value;
প্রপার্টি ভ্যালু এবং প্রভাব
| মান | ব্যাখ্যা |
|---|---|
| baseline | ডিফল্ট। পেরেন্ট এলিমেন্টের বেসলাইনের সাথে সারিবদ্ধ। |
| length | নির্দিষ্ট দূরতায় (px, em, cm) উপরে বা নিচে সরিয়ে দেয়। পজিটিভ=উপরে, নেগেটিভ=নিচে। |
| sub | সাবস্ক্রিপ্ট বেসলাইনের সাথে সারিবদ্ধ (নিচে)। |
| super | সুপারস্ক্রিপ্ট বেসলাইনের সাথে সারিবদ্ধ (উপরে)। |
| top | লাইনের সবচেয়ে উপরের এলিমেন্টের টপের সাথে সারিবদ্ধ। |
| text-top | পেরেন্ট এলিমেন্টের টেক্সটের টপের সাথে সারিবদ্ধ। |
| middle | পেরেন্ট এলিমেন্টের মাঝপথে সারিবদ্ধ। |
| bottom | লাইনের সবচেয়ে নিচের এলিমেন্টের বটমের সাথে সারিবদ্ধ। |
| text-bottom | পেরেন্ট এলিমেন্টের টেক্সটের বটমের সাথে সারিবদ্ধ। |
| initial | প্রপার্টিকে ডিফল্ট মানতে ফিরিয়ে আনে। |
| inherit | পেরেন্ট এলিমেন্ট থেকে মান kế thừa করে। |
গুরুত্বপূর্ণ নোট
- vertical-align শুধু ইনলাইন, ইনলাইন-ব্লক, এবং টেবিল-সেল এলিমেন্টে কাজ করে
- ব্লক এলিমেন্টে কাজ করে না (সেখানে margin, flexbox, grid ব্যবহার করুন)
- ইমেজ এবং টেক্সট একসাথে সারিবদ্ধ করার জন্য খুব উপযোগী
উপসংহার
vertical-align প্রপার্টি ইনলাইন এলিমেন্টগুলোর লম্বাকার সারিবদ্ধতা নিয়ন্ত্রণের জন্য অপরিহার্য। সবচেয়ে সাধারণ ব্যবহার: ইমেজ এবং টেক্সট এক লাইনে সারিবদ্ধ করা (vertical-align: middle)।
