আমি মনে করি আপনারা অনেকেই যারা লেআউট নিয়ে কাজ করেছেন তারা উপাদানগুলিকে উল্লম্বভাবে সারিবদ্ধ করার প্রয়োজনের সম্মুখীন হয়েছেন এবং জানেন যে কেন্দ্রে একটি উপাদান সারিবদ্ধ করার সময় কী অসুবিধা হয়।
হ্যাঁ, CSS-এ উল্লম্ব প্রান্তিককরণের জন্য অনেকগুলি মান সহ একটি বিশেষ উল্লম্ব-সারিবদ্ধ বৈশিষ্ট্য রয়েছে। তবে বাস্তবে তা আশানুরূপ কাজ করে না। আসুন এটি বের করার চেষ্টা করি।
আসুন নিম্নলিখিত পদ্ধতির তুলনা করি। এর সাথে প্রান্তিককরণ:
- টেবিল
- ইন্ডেন্টেশন,
- লাইনের উচ্চতা ,
- প্রসারিত,
- ঋণাত্মক মার্জিন,
- রূপান্তর,
- ছদ্ম উপাদান
- flexbox
দুই আছে div উপাদান, যার একটি অন্যটির মধ্যে বাসা বাঁধে। আসুন তাদের উপযুক্ত ক্লাস দিই - বাইরের এবং ভিতরের।
লক্ষ্য হল ভেতরের উপাদানটিকে বাইরের উপাদানের কেন্দ্রে সারিবদ্ধ করা।
শুরু করার জন্য, কেস বিবেচনা করুন যখন বাইরের এবং ভিতরের ব্লকের মাপ পরিচিত. আসুন নিয়মটি যোগ করি: ভিতরের উপাদানটিতে ইনলাইন-ব্লক এবং টেক্সট-সারিবদ্ধ: কেন্দ্র এবং উল্লম্ব-সারিবদ্ধ: মধ্যম থেকে বাইরের উপাদান।
মনে রাখবেন যে প্রান্তিককরণ শুধুমাত্র সেই উপাদানগুলিতে প্রযোজ্য যেগুলির ইনলাইন বা ইনলাইন-ব্লক ডিসপ্লে মোড রয়েছে৷
আসুন ব্লকগুলির মাপ সেট করি, সেইসাথে তাদের সীমানা দেখার জন্য পটভূমির রঙগুলি।
বাইরের (প্রস্থ: 200px; উচ্চতা: 200px; পাঠ্য-সারিবদ্ধ: কেন্দ্র; উল্লম্ব-সারিবদ্ধ: মধ্য; পটভূমি-রঙ: #ffc; ) .অভ্যন্তরীণ ( প্রদর্শন: ইনলাইন-ব্লক; প্রস্থ: 100px; উচ্চতা: 100px; পটভূমি-রঙ : #fcc;)
শৈলী প্রয়োগ করার পরে, আমরা তা দেখতে পাব ইনডোর ইউনিটঅনুভূমিকভাবে সারিবদ্ধ, কিন্তু উল্লম্বভাবে নয়:
http://jsfiddle.net/c1bgfffq/
এটা কেন ঘটেছিল?সত্য যে উল্লম্ব-সারিবদ্ধ বৈশিষ্ট্য প্রান্তিককরণ প্রভাবিত করে উপাদান নিজেই, এর বিষয়বস্তু নয়(যখন এটি টেবিল কোষে প্রয়োগ করা হয় তখন ছাড়া)। অতএব, এই সম্পত্তি প্রয়োগ বাইরের উপাদানকিছুই দেয়নি। অধিকন্তু, অভ্যন্তরীণ উপাদানটিতে এই বৈশিষ্ট্যটি প্রয়োগ করাও কিছুই করবে না, যেহেতু ইনলাইন-ব্লকগুলি প্রতিবেশী ব্লকগুলির সাথে উল্লম্বভাবে সারিবদ্ধ, এবং আমাদের ক্ষেত্রে আমাদের একটি ইনলাইন-ব্লক রয়েছে।
এই সমস্যা সমাধানের জন্য বিভিন্ন কৌশল আছে। আসুন নীচে তাদের প্রতিটি ঘনিষ্ঠভাবে দেখুন।
একটি টেবিল সঙ্গে প্রান্তিককরণ
প্রথম সমাধান যা মনে আসে তা হল বাইরের ব্লকটিকে একটি একক-কোষ টেবিল দিয়ে প্রতিস্থাপন করা। এই ক্ষেত্রে, প্রান্তিককরণটি ঘরের বিষয়বস্তুতে প্রয়োগ করা হবে, অর্থাৎ অভ্যন্তরীণ ব্লকে।
http://jsfiddle.net/c1bgfffq/1/
এই সমাধানের সুস্পষ্ট অসুবিধা হল শব্দার্থবিদ্যার দৃষ্টিকোণ থেকে সারিবদ্ধকরণের জন্য টেবিল ব্যবহার করা ভুল। দ্বিতীয় অসুবিধা হল যে একটি টেবিল তৈরি করতে, আপনাকে বাইরের ব্লকের চারপাশে আরও একটি উপাদান যুক্ত করতে হবে।
টেবিল এবং td ট্যাগগুলি div দিয়ে প্রতিস্থাপন করে এবং CSS-এ টেবিল ডিসপ্লে মোড সেট করে প্রথম বিয়োগটি আংশিকভাবে সরানো যেতে পারে।
.outer-wrapper ( প্রদর্শন: টেবিল; ) .outer ( প্রদর্শন: টেবিল-সেল; )
তবুও, বাইরের ব্লকটি এখনও সমস্ত পরবর্তী পরিণতি সহ একটি টেবিলে থাকবে।
প্যাডিং সঙ্গে প্রান্তিককরণ
অভ্যন্তরীণ এবং বাইরের ব্লকের উচ্চতা জানা থাকলে, সূত্রটি ব্যবহার করে অভ্যন্তরীণ ব্লকের উল্লম্ব প্যাডিং ব্যবহার করে প্রান্তিককরণ সেট করা যেতে পারে: (H বাইরের - H ভিতরের) / 2।বাইরের ( উচ্চতা: 200px; ) .অভ্যন্তরীণ (উচ্চতা: 100px; মার্জিন: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
সমাধানটির অসুবিধা হল যে এটি শুধুমাত্র সীমিত সংখ্যক ক্ষেত্রে প্রযোজ্য যখন উভয় ব্লকের উচ্চতা জানা যায়।
লাইন-উচ্চতার সাথে সারিবদ্ধকরণ
আপনি যদি জানেন যে ভিতরের ব্লকটি পাঠ্যের এক লাইনের বেশি গ্রহণ করবে না, তাহলে আপনি লাইন-উচ্চতা বৈশিষ্ট্যটি ব্যবহার করতে পারেন এবং এটি বাইরের ব্লকের উচ্চতার সমান সেট করতে পারেন। যেহেতু অভ্যন্তরীণ ব্লকের বিষয়বস্তু দ্বিতীয় লাইনে মোড়ানো উচিত নয়, তাই সাদা-স্পেস: Nowrap এবং overflow: লুকানো নিয়মগুলিও যোগ করার পরামর্শ দেওয়া হচ্ছে।বাইরের (উচ্চতা: 200px; লাইন-উচ্চতা: 200px; ) .অভ্যন্তরীণ (সাদা-স্পেস: নওর্যাপ; ওভারফ্লো: লুকানো; )
http://jsfiddle.net/c1bgfffq/12/
এই কৌশলটি মাল্টিলাইন টেক্সট সারিবদ্ধ করতেও ব্যবহার করা যেতে পারে যদি আপনি ভিতরের ব্লকের জন্য লাইন-উচ্চতার মানকে ওভাররাইড করেন এবং নিয়মগুলি যোগ করেন: inline-block এবং vertical-align: Middle।
বাইরের ( উচ্চতা: 200px; লাইন-উচ্চতা: 200px; ) .অভ্যন্তরীণ ( লাইন-উচ্চতা: স্বাভাবিক; প্রদর্শন: ইনলাইন-ব্লক; উল্লম্ব-সারিবদ্ধ: মধ্যম; )
http://jsfiddle.net/c1bgfffq/15/
মাইনাস এই পদ্ধতিবাইরের ব্লকের উচ্চতা জানতে হবে।
প্রসারিত প্রান্তিককরণ
এই পদ্ধতিটি ব্যবহার করা যেতে পারে যখন বাইরের ব্লকের উচ্চতা অজানা, কিন্তু ভিতরের ব্লকের উচ্চতা জানা যায়।এর জন্য আপনার প্রয়োজন:
- বাইরের ব্লকে আপেক্ষিক অবস্থান নির্ধারণ করুন এবং অভ্যন্তরীণ ব্লকে পরম অবস্থান নির্ধারণ করুন;
- নিয়ম শীর্ষে যোগ করুন: 0 এবং নীচে: 0 ভিতরের ব্লকে, যার ফলস্বরূপ এটি বাইরের ব্লকের পুরো উচ্চতায় প্রসারিত হবে;
- ভিতরের ব্লকের উল্লম্ব প্যাডিংয়ের জন্য স্বয়ংক্রিয় মান সেট করুন।
http://jsfiddle.net/c1bgfffq/4/
এই কৌশলটির সারমর্ম হল যে একটি প্রসারিত এবং একেবারে অবস্থানযুক্ত ব্লকের জন্য একটি উচ্চতা সেট করার ফলে ব্রাউজার সমান অনুপাতে উল্লম্ব প্যাডিং গণনা করতে পারে যদি তাদের মান স্বয়ংক্রিয়ভাবে সেট করা হয়।
নেতিবাচক মার্জিন-শীর্ষের সাথে প্রান্তিককরণ
এই পদ্ধতিটি ব্যাপকভাবে পরিচিত হয়ে উঠেছে এবং এটি প্রায়শই ব্যবহৃত হয়। পূর্ববর্তীটির মতো, এটি প্রয়োগ করা হয় যখন বাইরের ব্লকের উচ্চতা অজানা, তবে ভিতরের ব্লকের উচ্চতা জানা যায়।আপনাকে বাইরের ব্লকটিকে আপেক্ষিক অবস্থানে সেট করতে হবে এবং অভ্যন্তরীণ ব্লকটিকে পরম অবস্থানে সেট করতে হবে। তারপরে আপনাকে ভিতরের বাক্সটিকে বাইরের বাক্সের শীর্ষের অর্ধেক উচ্চতার নীচে সরাতে হবে: 50% এবং এটিকে তার নিজস্ব উচ্চতার মার্জিন-শীর্ষের অর্ধেক উপরে নিয়ে যেতে হবে: -H ভিতরের / 2।
বাইরের ( অবস্থান: আপেক্ষিক; ) .অভ্যন্তরীণ ( উচ্চতা: 100px; অবস্থান: পরম; শীর্ষ: 50%; মার্জিন-টপ: -50px; )
http://jsfiddle.net/c1bgfffq/13/
এই পদ্ধতির অসুবিধা হল যে অন্দর ইউনিটের উচ্চতা জানা আবশ্যক।
রূপান্তর সঙ্গে প্রান্তিককরণ
এই পদ্ধতিটি আগেরটির মতোই, তবে অভ্যন্তরীণ ব্লকের উচ্চতা অজানা থাকলে এটি প্রয়োগ করা যেতে পারে। এই ক্ষেত্রে, পিক্সেলে নেতিবাচক প্যাডিং সেট করার পরিবর্তে, আপনি ট্রান্সফর্ম প্রপার্টি ব্যবহার করতে পারেন এবং translateY ফাংশন এবং -50% এর মান দিয়ে ভিতরের বাক্সটিকে উপরে তুলতে পারেন।বাইরের ( অবস্থান: আপেক্ষিক; ) .অভ্যন্তরীণ ( অবস্থান: পরম; শীর্ষ: 50%; রূপান্তর: অনুবাদওয়াই(-50%); )
http://jsfiddle.net/c1bgfffq/9/
কেন আগের পদ্ধতিতে শতাংশ হিসাবে মান সেট করা অসম্ভব ছিল? যেহেতু মার্জিন সম্পত্তির শতাংশের মানগুলি মূল উপাদানের সাথে আপেক্ষিক, তাই 50% এর মান বাইরের বাক্সের অর্ধেক উচ্চতার সমান হবে এবং আমাদের ভিতরের বাক্সটিকে তার নিজের উচ্চতার অর্ধেক বাড়াতে হবে। এই রূপান্তর সম্পত্তির জন্য ঠিক কি.
এই পদ্ধতির অসুবিধা হল অভ্যন্তরীণ ব্লকের পরম অবস্থান থাকলে এটি প্রয়োগ করা যাবে না।
Flexbox সঙ্গে প্রান্তিককরণ
অধিকাংশ আধুনিক উপায়উল্লম্ব প্রান্তিককরণ হল নমনীয় বক্স লেআউট (জনপ্রিয়ভাবে ফ্লেক্সবক্স নামে পরিচিত) ব্যবহার করা। এই মডিউলটি আপনাকে নমনীয়ভাবে পৃষ্ঠায় উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে দেয়, সেগুলিকে প্রায় কোথাও স্থাপন করে। ফ্লেক্সবক্সের জন্য কেন্দ্র সারিবদ্ধকরণ একটি খুব সহজ কাজ।বাইরের ব্লকটি প্রদর্শনের জন্য সেট করা প্রয়োজন: flex, এবং ভিতরের ব্লকটি মার্জিনে সেট করা প্রয়োজন: auto। এবং এটা সব! সুন্দর, তাই না?
বাইরের ( প্রদর্শন: ফ্লেক্স; প্রস্থ: 200px; উচ্চতা: 200px; ) .অভ্যন্তরীণ (প্রস্থ: 100px; মার্জিন: স্বয়ংক্রিয়; )
http://jsfiddle.net/c1bgfffq/14/
এই পদ্ধতির অসুবিধা হল যে Flexbox শুধুমাত্র আধুনিক ব্রাউজার দ্বারা সমর্থিত।
কোন পথ বেছে নেবেন?
সমস্যার বিবৃতি থেকে এগিয়ে যাওয়া প্রয়োজন:- টেক্সটের উল্লম্ব প্রান্তিককরণের জন্য, উল্লম্ব প্যাডিং বা লাইন-উচ্চতা বৈশিষ্ট্য ব্যবহার করা ভাল।
- একটি পরিচিত উচ্চতা (যেমন আইকন) সহ সম্পূর্ণরূপে অবস্থানকারী উপাদানগুলির জন্য, একটি নেতিবাচক মার্জিন-টপ পদ্ধতি আদর্শ।
- আরো বেশী কঠিন ক্ষেত্রে, যখন ব্লকের উচ্চতা অজানা, একটি ছদ্ম-উপাদান বা রূপান্তর বৈশিষ্ট্য ব্যবহার করা আবশ্যক।
- ঠিক আছে, যদি আপনি ভাগ্যবান হন যে IE এর পুরানো সংস্করণগুলিকে সমর্থন করার প্রয়োজন না হয়, তবে অবশ্যই ফ্লেক্সবক্স আরও ভাল।
আমি মনে করি আপনারা অনেকেই যারা লেআউট নিয়ে কাজ করেছেন তারা উপাদানগুলিকে উল্লম্বভাবে সারিবদ্ধ করার প্রয়োজনের সম্মুখীন হয়েছেন এবং জানেন যে কেন্দ্রে একটি উপাদান সারিবদ্ধ করার সময় কী অসুবিধা হয়।
হ্যাঁ, CSS-এ উল্লম্ব প্রান্তিককরণের জন্য অনেকগুলি মান সহ একটি বিশেষ উল্লম্ব-সারিবদ্ধ বৈশিষ্ট্য রয়েছে। তবে বাস্তবে তা আশানুরূপ কাজ করে না। আসুন এটি বের করার চেষ্টা করি।
আসুন নিম্নলিখিত পদ্ধতির তুলনা করি। এর সাথে প্রান্তিককরণ:
- টেবিল
- ইন্ডেন্টেশন,
- লাইনের উচ্চতা ,
- প্রসারিত,
- ঋণাত্মক মার্জিন,
- রূপান্তর,
- ছদ্ম উপাদান
- flexbox
দুটি ডিভ উপাদান রয়েছে, একটির মধ্যে অন্যটি নেস্টেড। আসুন তাদের উপযুক্ত ক্লাস দিই - বাইরের এবং ভিতরের।
লক্ষ্য হল ভেতরের উপাদানটিকে বাইরের উপাদানের কেন্দ্রে সারিবদ্ধ করা।
শুরু করার জন্য, কেস বিবেচনা করুন যখন বাইরের এবং ভিতরের ব্লকের মাপ পরিচিত. আসুন নিয়মটি যোগ করি: ভিতরের উপাদানটিতে ইনলাইন-ব্লক এবং টেক্সট-সারিবদ্ধ: কেন্দ্র এবং উল্লম্ব-সারিবদ্ধ: মধ্যম থেকে বাইরের উপাদান।
মনে রাখবেন যে প্রান্তিককরণ শুধুমাত্র সেই উপাদানগুলিতে প্রযোজ্য যেগুলির ইনলাইন বা ইনলাইন-ব্লক ডিসপ্লে মোড রয়েছে৷
আসুন ব্লকগুলির মাপ সেট করি, সেইসাথে তাদের সীমানা দেখার জন্য পটভূমির রঙগুলি।
বাইরের (প্রস্থ: 200px; উচ্চতা: 200px; পাঠ্য-সারিবদ্ধ: কেন্দ্র; উল্লম্ব-সারিবদ্ধ: মধ্য; পটভূমি-রঙ: #ffc; ) .অভ্যন্তরীণ ( প্রদর্শন: ইনলাইন-ব্লক; প্রস্থ: 100px; উচ্চতা: 100px; পটভূমি-রঙ : #fcc;)
স্টাইলগুলি প্রয়োগ করার পরে, আমরা দেখতে পাব যে ভিতরের ব্লকটি অনুভূমিকভাবে সারিবদ্ধ করা হয়েছে, তবে উল্লম্বভাবে নয়:
http://jsfiddle.net/c1bgfffq/
এটা কেন ঘটেছিল?সত্য যে উল্লম্ব-সারিবদ্ধ বৈশিষ্ট্য প্রান্তিককরণ প্রভাবিত করে উপাদান নিজেই, এর বিষয়বস্তু নয়(যখন এটি টেবিল কোষে প্রয়োগ করা হয় তখন ছাড়া)। অতএব, বাইরের উপাদানটিতে এই সম্পত্তি প্রয়োগ করে কিছুই হয়নি। অধিকন্তু, অভ্যন্তরীণ উপাদানটিতে এই বৈশিষ্ট্যটি প্রয়োগ করাও কিছুই করবে না, যেহেতু ইনলাইন-ব্লকগুলি প্রতিবেশী ব্লকগুলির সাথে উল্লম্বভাবে সারিবদ্ধ, এবং আমাদের ক্ষেত্রে আমাদের একটি ইনলাইন-ব্লক রয়েছে।
এই সমস্যা সমাধানের জন্য বিভিন্ন কৌশল আছে। আসুন নীচে তাদের প্রতিটি ঘনিষ্ঠভাবে দেখুন।
একটি টেবিল সঙ্গে প্রান্তিককরণ
প্রথম সমাধান যা মনে আসে তা হল বাইরের ব্লকটিকে একটি একক-কোষ টেবিল দিয়ে প্রতিস্থাপন করা। এই ক্ষেত্রে, প্রান্তিককরণটি ঘরের বিষয়বস্তুতে প্রয়োগ করা হবে, অর্থাৎ অভ্যন্তরীণ ব্লকে।
http://jsfiddle.net/c1bgfffq/1/
এই সমাধানের সুস্পষ্ট অসুবিধা হল শব্দার্থবিদ্যার দৃষ্টিকোণ থেকে সারিবদ্ধকরণের জন্য টেবিল ব্যবহার করা ভুল। দ্বিতীয় অসুবিধা হল যে একটি টেবিল তৈরি করতে, আপনাকে বাইরের ব্লকের চারপাশে আরও একটি উপাদান যুক্ত করতে হবে।
টেবিল এবং td ট্যাগগুলি div দিয়ে প্রতিস্থাপন করে এবং CSS-এ টেবিল ডিসপ্লে মোড সেট করে প্রথম বিয়োগটি আংশিকভাবে সরানো যেতে পারে।
.outer-wrapper ( প্রদর্শন: টেবিল; ) .outer ( প্রদর্শন: টেবিল-সেল; )
তবুও, বাইরের ব্লকটি এখনও সমস্ত পরবর্তী পরিণতি সহ একটি টেবিলে থাকবে।
প্যাডিং সঙ্গে প্রান্তিককরণ
অভ্যন্তরীণ এবং বাইরের ব্লকের উচ্চতা জানা থাকলে, সূত্রটি ব্যবহার করে অভ্যন্তরীণ ব্লকের উল্লম্ব প্যাডিং ব্যবহার করে প্রান্তিককরণ সেট করা যেতে পারে: (H বাইরের - H ভিতরের) / 2।বাইরের ( উচ্চতা: 200px; ) .অভ্যন্তরীণ (উচ্চতা: 100px; মার্জিন: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
সমাধানটির অসুবিধা হল যে এটি শুধুমাত্র সীমিত সংখ্যক ক্ষেত্রে প্রযোজ্য যখন উভয় ব্লকের উচ্চতা জানা যায়।
লাইন-উচ্চতার সাথে সারিবদ্ধকরণ
আপনি যদি জানেন যে ভিতরের ব্লকটি পাঠ্যের এক লাইনের বেশি গ্রহণ করবে না, তাহলে আপনি লাইন-উচ্চতা বৈশিষ্ট্যটি ব্যবহার করতে পারেন এবং এটি বাইরের ব্লকের উচ্চতার সমান সেট করতে পারেন। যেহেতু অভ্যন্তরীণ ব্লকের বিষয়বস্তু দ্বিতীয় লাইনে মোড়ানো উচিত নয়, তাই সাদা-স্পেস: Nowrap এবং overflow: লুকানো নিয়মগুলিও যোগ করার পরামর্শ দেওয়া হচ্ছে।বাইরের (উচ্চতা: 200px; লাইন-উচ্চতা: 200px; ) .অভ্যন্তরীণ (সাদা-স্পেস: নওর্যাপ; ওভারফ্লো: লুকানো; )
http://jsfiddle.net/c1bgfffq/12/
এই কৌশলটি মাল্টিলাইন টেক্সট সারিবদ্ধ করতেও ব্যবহার করা যেতে পারে যদি আপনি ভিতরের ব্লকের জন্য লাইন-উচ্চতার মানকে ওভাররাইড করেন এবং নিয়মগুলি যোগ করেন: inline-block এবং vertical-align: Middle।
বাইরের ( উচ্চতা: 200px; লাইন-উচ্চতা: 200px; ) .অভ্যন্তরীণ ( লাইন-উচ্চতা: স্বাভাবিক; প্রদর্শন: ইনলাইন-ব্লক; উল্লম্ব-সারিবদ্ধ: মধ্যম; )
http://jsfiddle.net/c1bgfffq/15/
এই পদ্ধতির অসুবিধা হল যে বাইরের ব্লকের উচ্চতা জানা আবশ্যক।
প্রসারিত প্রান্তিককরণ
এই পদ্ধতিটি ব্যবহার করা যেতে পারে যখন বাইরের ব্লকের উচ্চতা অজানা, কিন্তু ভিতরের ব্লকের উচ্চতা জানা যায়।এর জন্য আপনার প্রয়োজন:
- বাইরের ব্লকে আপেক্ষিক অবস্থান নির্ধারণ করুন এবং অভ্যন্তরীণ ব্লকে পরম অবস্থান নির্ধারণ করুন;
- নিয়ম শীর্ষে যোগ করুন: 0 এবং নীচে: 0 ভিতরের ব্লকে, যার ফলস্বরূপ এটি বাইরের ব্লকের পুরো উচ্চতায় প্রসারিত হবে;
- ভিতরের ব্লকের উল্লম্ব প্যাডিংয়ের জন্য স্বয়ংক্রিয় মান সেট করুন।
http://jsfiddle.net/c1bgfffq/4/
এই কৌশলটির সারমর্ম হল যে একটি প্রসারিত এবং একেবারে অবস্থানযুক্ত ব্লকের জন্য একটি উচ্চতা সেট করার ফলে ব্রাউজার সমান অনুপাতে উল্লম্ব প্যাডিং গণনা করতে পারে যদি তাদের মান স্বয়ংক্রিয়ভাবে সেট করা হয়।
নেতিবাচক মার্জিন-শীর্ষের সাথে প্রান্তিককরণ
এই পদ্ধতিটি ব্যাপকভাবে পরিচিত হয়ে উঠেছে এবং এটি প্রায়শই ব্যবহৃত হয়। পূর্ববর্তীটির মতো, এটি প্রয়োগ করা হয় যখন বাইরের ব্লকের উচ্চতা অজানা, তবে ভিতরের ব্লকের উচ্চতা জানা যায়।আপনাকে বাইরের ব্লকটিকে আপেক্ষিক অবস্থানে সেট করতে হবে এবং অভ্যন্তরীণ ব্লকটিকে পরম অবস্থানে সেট করতে হবে। তারপরে আপনাকে ভিতরের বাক্সটিকে বাইরের বাক্সের শীর্ষের অর্ধেক উচ্চতার নীচে সরাতে হবে: 50% এবং এটিকে তার নিজস্ব উচ্চতার মার্জিন-শীর্ষের অর্ধেক উপরে নিয়ে যেতে হবে: -H ভিতরের / 2।
বাইরের ( অবস্থান: আপেক্ষিক; ) .অভ্যন্তরীণ ( উচ্চতা: 100px; অবস্থান: পরম; শীর্ষ: 50%; মার্জিন-টপ: -50px; )
http://jsfiddle.net/c1bgfffq/13/
এই পদ্ধতির অসুবিধা হল যে অন্দর ইউনিটের উচ্চতা জানা আবশ্যক।
রূপান্তর সঙ্গে প্রান্তিককরণ
এই পদ্ধতিটি আগেরটির মতোই, তবে অভ্যন্তরীণ ব্লকের উচ্চতা অজানা থাকলে এটি প্রয়োগ করা যেতে পারে। এই ক্ষেত্রে, পিক্সেলে নেতিবাচক প্যাডিং সেট করার পরিবর্তে, আপনি ট্রান্সফর্ম প্রপার্টি ব্যবহার করতে পারেন এবং translateY ফাংশন এবং -50% এর মান দিয়ে ভিতরের বাক্সটিকে উপরে তুলতে পারেন।বাইরের ( অবস্থান: আপেক্ষিক; ) .অভ্যন্তরীণ ( অবস্থান: পরম; শীর্ষ: 50%; রূপান্তর: অনুবাদওয়াই(-50%); )
http://jsfiddle.net/c1bgfffq/9/
কেন আগের পদ্ধতিতে শতাংশ হিসাবে মান সেট করা অসম্ভব ছিল? যেহেতু মার্জিন সম্পত্তির শতাংশের মানগুলি মূল উপাদানের সাথে আপেক্ষিক, তাই 50% এর মান বাইরের বাক্সের অর্ধেক উচ্চতার সমান হবে এবং আমাদের ভিতরের বাক্সটিকে তার নিজের উচ্চতার অর্ধেক বাড়াতে হবে। এই রূপান্তর সম্পত্তির জন্য ঠিক কি.
এই পদ্ধতির অসুবিধা হল অভ্যন্তরীণ ব্লকের পরম অবস্থান থাকলে এটি প্রয়োগ করা যাবে না।
Flexbox সঙ্গে প্রান্তিককরণ
উল্লম্বভাবে সারিবদ্ধ করার সবচেয়ে আধুনিক উপায় হল নমনীয় বক্স লেআউট (জনপ্রিয়ভাবে ফ্লেক্সবক্স নামে পরিচিত) ব্যবহার করা। এই মডিউলটি আপনাকে নমনীয়ভাবে পৃষ্ঠায় উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে দেয়, সেগুলিকে প্রায় কোথাও স্থাপন করে। ফ্লেক্সবক্সের জন্য কেন্দ্র সারিবদ্ধকরণ একটি খুব সহজ কাজ।বাইরের ব্লকটি প্রদর্শনের জন্য সেট করা প্রয়োজন: flex, এবং ভিতরের ব্লকটি মার্জিনে সেট করা প্রয়োজন: auto। এবং এটা সব! সুন্দর, তাই না?
বাইরের ( প্রদর্শন: ফ্লেক্স; প্রস্থ: 200px; উচ্চতা: 200px; ) .অভ্যন্তরীণ (প্রস্থ: 100px; মার্জিন: স্বয়ংক্রিয়; )
http://jsfiddle.net/c1bgfffq/14/
এই পদ্ধতির অসুবিধা হল যে Flexbox শুধুমাত্র আধুনিক ব্রাউজার দ্বারা সমর্থিত।
কোন পথ বেছে নেবেন?
সমস্যার বিবৃতি থেকে এগিয়ে যাওয়া প্রয়োজন:- টেক্সটের উল্লম্ব প্রান্তিককরণের জন্য, উল্লম্ব প্যাডিং বা লাইন-উচ্চতা বৈশিষ্ট্য ব্যবহার করা ভাল।
- একটি পরিচিত উচ্চতা (যেমন আইকন) সহ সম্পূর্ণরূপে অবস্থানকারী উপাদানগুলির জন্য, একটি নেতিবাচক মার্জিন-টপ পদ্ধতি আদর্শ।
- আরও জটিল ক্ষেত্রে যেখানে ব্লকের উচ্চতা অজানা, একটি ছদ্ম-উপাদান বা রূপান্তর বৈশিষ্ট্য ব্যবহার করা উচিত।
- ঠিক আছে, যদি আপনি ভাগ্যবান হন যে IE এর পুরানো সংস্করণগুলিকে সমর্থন করার প্রয়োজন না হয়, তবে অবশ্যই ফ্লেক্সবক্স আরও ভাল।
ট্যাগ: ট্যাগ যোগ করুন
অনুভূমিকভাবে এবং উল্লম্বভাবে উপাদানগুলি সারিবদ্ধ করা যেতে পারে ভিন্ন পথ. পদ্ধতির পছন্দ উপাদানের ধরনের (ব্লক বা ইনলাইন), তার অবস্থানের ধরন, আকার ইত্যাদির উপর নির্ভর করে।
1. ব্লক/পৃষ্ঠার কেন্দ্রে অনুভূমিক প্রান্তিককরণ
1.1। যদি ব্লকের প্রস্থ থাকে:
div ( প্রস্থ: 300px; মার্জিন: 0 স্বয়ংক্রিয়; /* উপাদানটিকে মূল ব্লকের মধ্যে অনুভূমিকভাবে কেন্দ্রে রাখুন*/ )আপনি যদি এইভাবে একটি ইনলাইন উপাদান সারিবদ্ধ করতে চান তবে আপনাকে এটি প্রদর্শন করতে সেট করতে হবে: ব্লক;
1.2। যদি একটি ব্লক অন্য ব্লকের মধ্যে নেস্টেড থাকে এবং এটির জন্য কোন/প্রস্থ সেট না থাকে:
1.3। যদি ব্লকের প্রস্থ থাকে এবং প্যারেন্ট ব্লকের মাঝখানে ঠিক করা প্রয়োজন হয়:
1.4। যদি ব্লকের জন্য কোন প্রস্থ সেট করা না থাকে, তাহলে আপনি প্যারেন্ট র্যাপার ব্লক ব্যবহার করে কেন্দ্র করতে পারেন:
2. উল্লম্ব প্রান্তিককরণ
2.1। যদি পাঠ্যটি একটি লাইন নেয়, উদাহরণস্বরূপ, বোতাম এবং মেনু আইটেমগুলির জন্য:
বোতাম (উচ্চতা: 50px; লাইন-উচ্চতা: 50px; )2.2। প্যারেন্ট ব্লকের ভিতরে উল্লম্বভাবে একটি ব্লক সারিবদ্ধ করতে:
2.3। টেবিলের ধরন অনুসারে উল্লম্ব প্রান্তিককরণ:
2.4। যদি বাক্সে একটি প্রস্থ এবং উচ্চতা সেট থাকে এবং মূল বাক্সের উপর কেন্দ্রীভূত করা প্রয়োজন হয়:
2.5। CSS3 রূপান্তর ব্যবহার করে পৃষ্ঠা/ব্লকের কেন্দ্রে পরম অবস্থান:
যদি উপাদানটির মাত্রা থাকে
div ( প্রস্থ: 300px; /*ব্লকের প্রস্থ সেট করুন */ উচ্চতা: 100px; /* ব্লকের উচ্চতা সেট করুন */ রূপান্তর: অনুবাদ(-50%, -50%); অবস্থান: পরম; শীর্ষ: 50%; বাম: 50% ;)
যদি উপাদানটির কোন মাত্রা না থাকে এবং খালি না থাকে
এখানে কিছু টেক্সট
CSS এর সাথে একটি বস্তুকে উল্লম্বভাবে কেন্দ্রীভূত করার বিভিন্ন মৌলিকভাবে ভিন্ন উপায় রয়েছে, কিন্তু সঠিকটি বেছে নেওয়া কঠিন হতে পারে। আমরা তাদের কিছু দেখব, এবং অর্জিত জ্ঞান ব্যবহার করে একটি ছোট ওয়েবসাইট তৈরি করব।
CSS এর সাথে উল্লম্ব কেন্দ্র সারিবদ্ধকরণ অর্জন করা এত সহজ নয়। অনেক উপায় আছে এবং সব ব্রাউজারে সব কাজ করে না। 5 তে দেখা যাক বিভিন্ন পদ্ধতি, সেইসাথে "এর জন্য" এবং "বিরুদ্ধে" তাদের প্রতিটি। উদাহরণ।
১ম উপায়
এই পদ্ধতিটি অনুমান করে যে আমরা কিছু উপাদান সেট করছি
পেশাদার
- বিষয়বস্তু গতিশীলভাবে উচ্চতা পরিবর্তন করতে পারে (উচ্চতা CSS এ সংজ্ঞায়িত করা হয় না)।
- বিষয়বস্তুর জন্য পর্যাপ্ত স্থান না থাকলে তা কাটা হয় না।
মাইনাস
- IE 7 এবং নীচে কাজ করে না
- নেস্টেড ট্যাগ প্রচুর
২য় পদ্ধতি
এই পদ্ধতিটি div-এর নিখুঁত অবস্থান ব্যবহার করে, যার শীর্ষ সেট 50% এবং এর শীর্ষ মার্জিন (মার্জিন-টপ) বিষয়বস্তুর অর্ধেক উচ্চতা বিয়োগ করে। এটি বোঝায় যে বস্তুর একটি নির্দিষ্ট উচ্চতা থাকতে হবে, যা CSS শৈলীতে সংজ্ঞায়িত করা হয়েছে।
যেহেতু উচ্চতা স্থির, আপনি overflow:auto সেট করতে পারেন; বিষয়বস্তু ধারণকারী div-এর জন্য, তাই যদি বিষয়বস্তু ফিট না হয়, স্ক্রলবার প্রদর্শিত হবে।
পেশাদার
- সব ব্রাউজারে কাজ করে।
- অতিরিক্ত বিনিয়োগ নেই।
মাইনাস
- যখন পর্যাপ্ত স্থান না থাকে, তখন বিষয়বস্তু অদৃশ্য হয়ে যায় (যেমন ডিভটি শরীরের ভিতরে থাকে এবং ব্যবহারকারী উইন্ডোগুলি সঙ্কুচিত করে, এই ক্ষেত্রে স্ক্রলবারগুলি প্রদর্শিত হবে না৷
3য় পদ্ধতি
এই পদ্ধতিতে, আমরা কন্টেন্ট ডিভকে আরেকটি ডিভ দিয়ে মোড়ানো করব। এর উচ্চতা 50% (উচ্চতা: 50%;) এবং এর নীচের মার্জিনটি অর্ধেক উচ্চতায় সেট করুন (মার্জিন-নিচে:-সামগ্রী;)। বিষয়বস্তু ফ্লোট পরিষ্কার করবে এবং কেন্দ্রীভূত হবে।
পেশাদার
- সব ব্রাউজারে কাজ করে।
- যখন পর্যাপ্ত স্থান নেই (উদাহরণস্বরূপ, যখন উইন্ডোটি হ্রাস করা হয়) বিষয়বস্তুটি কাটা হয় না, স্ক্রলবারগুলি উপস্থিত হবে।
মাইনাস
- আমি মনে করি শুধুমাত্র একটি: যে একটি অতিরিক্ত খালি উপাদান ব্যবহার করা হয়।
৪র্থ পদ্ধতি।
এই পদ্ধতি অবস্থান ব্যবহার করে: পরম সম্পত্তি; নির্দিষ্ট মাত্রা (প্রস্থ এবং উচ্চতা) সহ ডিভগুলির জন্য। তারপর আমরা এর স্থানাঙ্ক টপ:0 সেট করি; নীচে: 0; , কিন্তু যেহেতু এটির একটি নির্দিষ্ট উচ্চতা রয়েছে, তাই এটি প্রসারিত করতে পারে না এবং কেন্দ্রীভূত হয়। এটি একটি নির্দিষ্ট-প্রস্থ ব্লক-স্তরের উপাদান (মারজিন: 0 স্বয়ংক্রিয়;) অনুভূমিকভাবে কেন্দ্রীভূত করার সুপরিচিত পদ্ধতির অনুরূপ।
পেশাদার
- খুব সহজ.
মাইনাস
- ইন্টারনেট এক্সপ্লোরারে কাজ করে না
- কন্টেইনারে পর্যাপ্ত জায়গা না থাকলে স্ক্রলবার ছাড়াই কন্টেন্ট ক্লিপ করা হবে।
৫ম পদ্ধতি
আপনি পাঠ্যের একটি লাইন কেন্দ্রে এই পদ্ধতি ব্যবহার করতে পারেন। শুধু পাঠ্যের উচ্চতা (লাইন-উচ্চতা) উপাদানের উচ্চতা (উচ্চতা) সেট করুন। এর পরে, লাইনটি কেন্দ্রে প্রদর্শিত হবে।
পেশাদার
- সব ব্রাউজারে কাজ করে।
- টেক্সট না হলে কাটে না।
মাইনাস
- শুধুমাত্র পাঠ্যের সাথে কাজ করে (ব্লক উপাদানগুলির সাথে কাজ করে না)।
- এক লাইনের বেশি লেখা থাকলে খুব খারাপ লাগে।
এই পদ্ধতিটি ছোট উপাদানের জন্য খুবই উপযোগী, যেমন একটি বোতাম বা টেক্সট ফিল্ডে টেক্সট কেন্দ্রীভূত করা।
এখন যেহেতু আপনি জানেন কিভাবে উল্লম্ব কেন্দ্রের সারিবদ্ধতা অর্জন করতে হয়, আসুন একটি সাধারণ ওয়েবসাইট তৈরি করি যা শেষ পর্যন্ত এইরকম দেখায়:
ধাপ 1
শব্দার্থিক মার্কআপ দিয়ে শুরু করা সবসময়ই ভালো। আমাদের পৃষ্ঠাটি এইভাবে গঠন করা হবে:
- #floater (কন্টেন্ট কেন্দ্রে)
- #কেন্দ্র (কেন্দ্রের উপাদান)
- #পাশে
- #লোগো
- #nav (তালিকা
- # বিষয়বস্তু
- # নীচে (কপিরাইট এবং সকলের জন্য)
আসুন নিম্নলিখিত html মার্কআপ লিখি:
একটি কেন্দ্রীভূত কোম্পানি একটি প্রতিষ্ঠানপেজের টাইটেল
প্রক্রিয়া-কেন্দ্রিক সহযোগিতা এবং ধারণা ভাগ করে নেওয়ার পরে হোলিস্টিকভাবে মূল্য সংযোজন আউটসোর্সিংকে পুনরায় ইঞ্জিনিয়ার করুন। সক্রিয় আবশ্যকতার মাধ্যমে প্রভাবশালী কুলুঙ্গি বাজারগুলিকে শক্তিশালীভাবে সরল করুন। বাধ্যতামূলক পরিস্থিতির পরে প্রিমিয়াম উদ্ভাবনকে সামগ্রিকভাবে প্রাধান্য দিন। অগ্রণী-প্রান্তের উৎপাদিত পণ্যগুলির সাথে মানব পুঁজিতে নির্বিঘ্নে উচ্চ মান পুনরুদ্ধার করুন। শক্তিশালী ঘূর্ণির আগে স্বতন্ত্রভাবে সিন্ডিকেট মান মেনে চলা স্কিমা। ইউনিকভাবে লিভারেজড ওয়েব-প্রস্তুতিকে পুনরুদ্ধার করুন, যা বাক্সের বাইরের তথ্যের সাথে সম্পর্কিত।
শিরোনাম 2
গ্রাহক নির্দেশিত প্রক্রিয়ার পরিবর্তে কাস্টমাইজড ওয়েব-প্রস্তুতিকে দক্ষতার সাথে গ্রহণ করুন। দৃঢ়ভাবে ক্রস-প্ল্যাটফর্মের প্রয়োজনীয়তা বৃদ্ধি করুন এবং সক্রিয় প্রযুক্তির সাথে দেখা করুন। এন্টারপ্রাইজ-ওয়াইড ইন্টারফেস ছাড়াই মাল্টিডিসিপ্লিনারি মেটা-পরিষেবাগুলিকে সুবিধাজনকভাবে শক্তিশালী করুন। মনোনিবেশিত ই-মার্কেট সহ প্রতিযোগিতামূলক কৌশলগত থিম ক্ষেত্রগুলিকে সুবিধাজনকভাবে প্রবাহিত করুন। ফসফ্লুরোসেন্টলি বিশ্বমানের সম্প্রদায়গুলিকে সিন্ডিকেট করে মূল্য সংযোজিত বাজারের সাথে। শক্তিশালী ই-পরিষেবাগুলির আগে যথাযথভাবে সামগ্রিক পরিষেবাগুলি পুনরুদ্ধার করুন৷
কপিরাইট বিজ্ঞপ্তি এখানে যায়
ধাপ ২
এখন আমরা পৃষ্ঠায় উপাদান স্থাপন করার জন্য সবচেয়ে সহজ CSS লিখব। আপনার এই কোডটি style.css ফাইলে সংরক্ষণ করা উচিত। এটিতে লিঙ্কটি html ফাইলে লেখা আছে।
এইচটিএমএল, বডি ( মার্জিন: 0; প্যাডিং: 0; উচ্চতা: 100%; ) বডি (পটভূমি: url("page_bg.jpg") 50% 50% নো-রিপিট #FC3; ফন্ট-ফ্যামিলি: জর্জিয়া, টাইমস, সেরিফ; ) #ফ্লোটার ( অবস্থান: আপেক্ষিক; ভাসমান: বাম; উচ্চতা: 50%; মার্জিন-নিচ: -200px; প্রস্থ: 1px; ) #কেন্দ্রিক ( অবস্থান: আপেক্ষিক; পরিষ্কার: বাম; উচ্চতা: 400px; প্রস্থ: 80%; সর্বোচ্চ -প্রস্থ: 800px; সর্বনিম্ন-প্রস্থ: 400px; মার্জিন: 0 স্বয়ংক্রিয়; ব্যাকগ্রাউন্ড: #fff; সীমানা: 4px কঠিন #666; ) # নীচে ( অবস্থান: পরম; নীচে: 0; ডান: 0; ) #nav ( অবস্থান: পরম; বাম: 0; শীর্ষ: 0; নীচে: 0; ডান: 70%; প্যাডিং: 20px; মার্জিন: 10px; ) # সামগ্রী ( অবস্থান: পরম; বাম: 30%; ডান: 0; শীর্ষ: 0; নীচে: 0; ওভারফ্লো: স্বয়ংক্রিয়; উচ্চতা: 340px; প্যাডিং: 20px; মার্জিন: 10px; )
আমরা আমাদের বিষয়বস্তু কেন্দ্র-সারিবদ্ধ করার আগে, আমাদের বডি এবং html উচ্চতা 100% সেট করতে হবে। যেহেতু উচ্চতা অভ্যন্তরীণ এবং বাহ্যিক প্যাডিং (প্যাডিং এবং মার্জিন) ছাড়াই বিবেচনা করা হয়, তাই আমরা সেগুলিকে (প্যাডিং) 0 এ সেট করি যাতে কোনও স্ক্রলবার না থাকে।
"ফ্লোটার" উপাদানের জন্য নীচের প্যাডিং হল বিষয়বস্তুর উচ্চতা (400px), যথা -200px ;
আপনার পৃষ্ঠাটি এখন এইরকম দেখতে হবে:
# কেন্দ্রীভূত উপাদানটির প্রস্থ 80%। এটি ছোট স্ক্রিনে আমাদের সাইটকে আরও সংকীর্ণ করে এবং বড়গুলিতে আরও প্রশস্ত করে তোলে৷ বেশিরভাগ সাইট উপরের বাম কোণে নতুন প্রশস্ত মনিটরে কুৎসিত দেখায়। ন্যূনতম-প্রস্থ এবং সর্বোচ্চ-প্রস্থ বৈশিষ্ট্যগুলিও আমাদের পৃষ্ঠাকে সীমাবদ্ধ করে যাতে এটি খুব চওড়া বা খুব সরু না দেখায়। ইন্টারনেট এক্সপ্লোরার এই বৈশিষ্ট্যগুলিকে সমর্থন করে না৷ এটি একটি নির্দিষ্ট প্রস্থে সেট করা প্রয়োজন।
যেহেতু #কেন্দ্রীভূত উপাদানটি অবস্থানে সেট করা হয়েছে: আপেক্ষিক, আমরা এটির মধ্যে উপাদানগুলির পরম অবস্থান ব্যবহার করতে পারি। তারপর ওভারফ্লো সেট করুন:অটো; #সামগ্রী উপাদানের জন্য যাতে ফিট করার মতো কোনো বিষয়বস্তু না থাকলে স্ক্রলবার দেখা যায়।
ধাপ 3
এবং শেষ জিনিসটি আমরা যা করব তা হল পৃষ্ঠাটিকে একটু সুন্দর দেখানোর জন্য কিছু স্টাইলিং যোগ করা। মেনু দিয়ে শুরু করা যাক।
#nav উল ( তালিকা-শৈলী: কোনোটিই নয়; প্যাডিং: 0; মার্জিন: 20px 0 0 0; পাঠ্য-ইন্ডেন্ট: 0; ) #nav li ( প্যাডিং: 0; মার্জিন: 3px; ) #nav li a ( প্রদর্শন: ব্লক; ব্যাকগ্রাউন্ড-রঙ: #e8e8e8; প্যাডিং: 7px; মার্জিন: 0; টেক্সট-ডেকোরেশন: কোনোটিই নয়; রঙ: #000; বর্ডার-বটম: 1px কঠিন #bbb; টেক্সট-সারিবদ্ধ: ডান; ) #nav li a::after ( বিষয়বস্তু: """; রঙ: #aaa; ফন্ট-ওজন: বোল্ড; প্রদর্শন: ইনলাইন; ফ্লোট: ডান; মার্জিন: 0 2px 0 5px; ) #nav li a: hover, #nav li a:focus ( background: # f8f8f8; বর্ডার-বটম-রং: #777; ) #nav li a:hover::after ( মার্জিন: 0 0 0 7px; রঙ: #f93; ) #nav li a:active ( প্যাডিং: 8px 7px 6px 7px; )
মেনুটিকে আরও ভাল দেখাতে আমরা প্রথম যে কাজটি করেছি তা হল list-style:none অ্যাট্রিবিউট সেট করে বুলেটগুলি সরিয়ে ফেলা এবং এছাড়াও প্যাডিং এবং প্যাডিং সেট করা, কারণ ডিফল্টগুলি ব্রাউজারগুলির মধ্যে ব্যাপকভাবে পরিবর্তিত হয়।
নোট করুন যে আমরা তারপর নির্দিষ্ট করেছি যে লিঙ্কগুলিকে ব্লক-স্তরের উপাদান হিসাবে রেন্ডার করা উচিত। এখন, প্রদর্শিত হলে, তারা যে উপাদানটিতে অবস্থিত তার পুরো প্রস্থ জুড়ে প্রসারিত হয়।
আরেকটি আকর্ষণীয় জিনিস যা আমরা মেনুতে ব্যবহার করেছি তা হল : আগে এবং : ছদ্ম-ক্লাসের পরে। তারা আপনাকে একটি উপাদানের আগে এবং পরে কিছু যোগ করার অনুমতি দেয়। প্রতিটি লিঙ্কের শেষে তীরের মতো আইকন বা চিহ্ন যোগ করার এটি একটি ভাল উপায়। এই কৌশলটি ইন্টারনেট এক্সপ্লোরার 7 এবং তার নীচে কাজ করে না।
ধাপ 4
এবং শেষ কিন্তু অন্তত নয়, আমরা আরও সৌন্দর্যের জন্য আমাদের ডিজাইনে কিছু ওড়না যোগ করব।
#কেন্দ্রীভূত ( -ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 8px; -moz-বর্ডার-ব্যাসার্ধ: 8px; সীমানা-ব্যাসার্ধ: 8px; ) h1, h2, h3, h4, h5, h6 (ফন্ট-পরিবার: হেলভেটিকা, এরিয়াল, সান- serif; ফন্ট-ওজন: স্বাভাবিক; রঙ: #666; ) h1 (রঙ: #f93; বর্ডার-বটম: 1px সলিড #ddd; অক্ষর-স্পেসিং: -0.05em; ফন্ট-ওজন: বোল্ড; মার্জিন-টপ: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; color: #f03; ) #logo ( font-size: 2em; text-align: center; color: #999; ) #logo শক্তিশালী ( ফন্ট-ওজন: স্বাভাবিক; ) #লোগো স্প্যান (প্রদর্শন: ব্লক; ফন্ট-আকার: 4em; লাইন-উচ্চতা: 0.7em; রঙ: #666; ) p, h2, h3 (লাইন-উচ্চতা: 1.6em;) a (রঙ: #f03;)
এই শৈলীতে, আমরা # কেন্দ্রীভূত উপাদানের জন্য গোলাকার কোণগুলি সেট করি। CSS3-এ, এটি বর্ডার-ব্যাসার্ধ সম্পত্তি দ্বারা পরিচালিত হবে। Mozilla Firefox এবং Safari/Webkit-এর জন্য -moz এবং -webkit উপসর্গগুলি ব্যবহার করা ছাড়া এটি এখনও কিছু ব্রাউজার দ্বারা প্রয়োগ করা হয়নি।
সামঞ্জস্য
আপনি যেমন অনুমান করেছেন, সামঞ্জস্যের সমস্যাগুলির প্রধান উত্স হল ইন্টারনেট এক্সপ্লোরার:
- #floater উপাদান একটি প্রস্থ সেট করা আবশ্যক
- IE 6 এ মেনুর চারপাশে অতিরিক্ত প্যাডিং
ভ্লাদ মার্জেভিচ
সারণী কক্ষগুলির বিষয়বস্তু একই সাথে অনুভূমিকভাবে এবং উল্লম্বভাবে সারিবদ্ধ হতে পারে এই কারণে, একে অপরের সাথে সম্পর্কিত উপাদানগুলির অবস্থান নিয়ন্ত্রণ করার সম্ভাবনাগুলি প্রসারিত হয়। সারণীগুলি আপনাকে ছবি, পাঠ্য, ফর্ম ক্ষেত্র এবং একে অপরের সাথে সম্পর্কিত অন্যান্য উপাদানগুলির এবং সামগ্রিকভাবে ওয়েব পৃষ্ঠার সারিবদ্ধকরণ সেট করতে দেয়৷ সাধারণভাবে, সারিবদ্ধকরণের মধ্যে একটি চাক্ষুষ সংযোগ স্থাপনের জন্য প্রধানত প্রয়োজনীয় বিভিন্ন উপাদান, সেইসাথে তাদের গ্রুপিং.
উল্লম্ব কেন্দ্রীকরণ
ভিজিটরকে সাইটের ফোকাস এবং শিরোনাম দেখানোর একটি উপায় হল একটি স্প্ল্যাশ পৃষ্ঠা ব্যবহার করা। এটি প্রথম পৃষ্ঠা, যার উপর, একটি নিয়ম হিসাবে, একটি ফ্ল্যাশ-সেভার বা একটি ছবি প্রকাশ করে মূল ধারণাসাইট ছবিটি সাইটের অন্যান্য বিভাগের একটি লিঙ্ক। মনিটরের রেজোলিউশন নির্বিশেষে ব্রাউজার উইন্ডোর কেন্দ্রে এই ছবিটি স্থাপন করা প্রয়োজন। এই উদ্দেশ্যে, আপনি 100% এর সমান প্রস্থ এবং উচ্চতা সহ একটি টেবিল ব্যবহার করতে পারেন (উদাহরণ 1)।
উদাহরণ 1: একটি ছবিকে কেন্দ্র করে
প্রান্তিককরণ 
AT এই উদাহরণঅনুভূমিক প্রান্তিককরণ align="center" ট্যাগ ব্যবহার করে সেট করা হয়
, এবং ঘরের বিষয়বস্তু উল্লম্বভাবে কেন্দ্রীভূত করার প্রয়োজন নেই, যেহেতু এই অবস্থানটি ডিফল্টরূপে সেট করা থাকে। টেবিলের উচ্চতা 100% সেট করতে, সরান, কোডটি আর বৈধ নয়।
ওয়েব পৃষ্ঠার সমগ্র উপলব্ধ এলাকার জন্য প্রস্থ এবং উচ্চতা ব্যবহার করা নিশ্চিত করে যে টেবিলের বিষয়বস্তু ব্রাউজার উইন্ডোর মাঝখানে কঠোরভাবে সারিবদ্ধ করা হবে, তার আকার নির্বিশেষে।
অনুভূমিক প্রান্তিককরণ
ট্যাগের সারিবদ্ধ (অনুভূমিক প্রান্তিককরণ) এবং ভ্যালাইন (উল্লম্ব প্রান্তিককরণ) বৈশিষ্ট্যগুলিকে একত্রিত করে
, একে অপরের সাথে সম্পর্কিত উপাদানগুলির বিভিন্ন ধরণের অবস্থান সেট করার অনুমতি রয়েছে। ডুমুর উপর. 1 দেখায় কিভাবে উপাদানগুলিকে অনুভূমিকভাবে সারিবদ্ধ করতে হয়। আসুন নীচের চিত্র অনুসারে পাঠ্য প্রান্তিককরণের কিছু উদাহরণ দেখি।
শীর্ষ প্রান্তিককরণ
ট্যাগের জন্য উপরের কক্ষের বিষয়বস্তুর প্রান্তিককরণ নির্দিষ্ট করতে
মান শীর্ষের সাথে ভ্যালাইন অ্যাট্রিবিউট সেট করতে হবে (উদাহরণ 2)। উদাহরণ 2: ভ্যালাইন ব্যবহার করা
প্রান্তিককরণ কলাম 1 কলাম 2 এই উদাহরণে, ট্যাগ প্যারামিটার ব্যবহার করে কোষের বৈশিষ্ট্যগুলি নিয়ন্ত্রিত হয়
, কিন্তু শৈলীর মাধ্যমে পরিবর্তন করা আরও সুবিধাজনক। বিশেষ করে, সেল সারিবদ্ধকরণ উল্লম্ব-সারিবদ্ধ এবং পাঠ্য-সারিবদ্ধ বৈশিষ্ট্য (উদাহরণ 3) দ্বারা নির্দিষ্ট করা হয়। উদাহরণ 3: প্রান্তিককরণের জন্য শৈলী প্রয়োগ করুন
প্রান্তিককরণ কলাম 1 কলাম 2 কোডটি ছোট করার জন্য, এই উদাহরণটি নির্বাচক গ্রুপিং ব্যবহার করে কারণ উল্লম্ব-সারিবদ্ধ এবং প্যাডিং বৈশিষ্ট্য একই সময়ে দুটি কক্ষে প্রয়োগ করা হয়।
নীচের প্রান্তিককরণ একইভাবে করা হয়, তবে উপরের পরিবর্তে নীচে ব্যবহার করা হয়।
কেন্দ্র প্রান্তিককরণ
ডিফল্টরূপে, একটি কক্ষের বিষয়বস্তু তাদের উল্লম্ব কেন্দ্রে সারিবদ্ধ করা হয়, তাই বিভিন্ন কলাম উচ্চতার ক্ষেত্রে, শীর্ষে প্রান্তিককরণ সেট করা প্রয়োজন। কখনও কখনও আপনাকে এখনও মূল প্রান্তিককরণ পদ্ধতি ছেড়ে যেতে হবে, উদাহরণস্বরূপ, ফর্মুলা স্থাপন করার সময়, যেমন চিত্রে দেখানো হয়েছে। 2.
এই ক্ষেত্রে, সূত্রটি ব্রাউজার উইন্ডোর কেন্দ্রে কঠোরভাবে অবস্থিত এবং এর সংখ্যাটি ডান প্রান্তে রয়েছে। উপাদানগুলির এই ধরনের ব্যবস্থার জন্য, আপনার তিনটি ঘর সহ একটি টেবিলের প্রয়োজন। বাইরের কক্ষগুলির একই আকার থাকা উচিত, মধ্য কক্ষে প্রান্তিককরণটি কেন্দ্রে করা হয়, এবং ডান কক্ষে - ডান প্রান্তে (উদাহরণ 4)। সূত্রটি কেন্দ্রীভূত হয় তা নিশ্চিত করার জন্য এই সংখ্যক কক্ষের প্রয়োজন।
উদাহরণ 4: সূত্র প্রান্তিককরণ
প্রান্তিককরণ 
(18.6) এই উদাহরণে, টেবিলের প্রথম ঘরটি খালি রাখা হয়েছে, এটি শুধুমাত্র একটি ইন্ডেন্ট তৈরি করতে কাজ করে, যা, স্টাইল ব্যবহার করেও সেট করা যেতে পারে।
সারিবদ্ধ ফর্ম উপাদান
সারণীগুলি ফর্ম ক্ষেত্রগুলির অবস্থান নির্ধারণের জন্য দরকারী, বিশেষত যখন সেগুলি পাঠ্যের সাথে ছেদ করা হয়। ফর্মের জন্য ডিজাইনের বিকল্পগুলির মধ্যে একটি, যা একটি মন্তব্য লিখতে ডিজাইন করা হয়েছে, চিত্রে দেখানো হয়েছে। 3.
ফর্ম ফিল্ডের কাছাকাছি টেক্সট ডান-সারিবদ্ধ করার জন্য এবং ফর্ম উপাদানগুলিকে বাম-সারিবদ্ধ করার জন্য, আপনার একটি অদৃশ্য সীমানা এবং দুটি কলাম সহ একটি টেবিলের প্রয়োজন৷ বাম কলামে পাঠ্য থাকবে এবং ডান কলামে পাঠ্য ক্ষেত্র থাকবে (উদাহরণ 5)।
উদাহরণ 5 সারিবদ্ধ ফর্ম ক্ষেত্র
প্রান্তিককরণ এই উদাহরণে, যে কক্ষগুলির জন্য ডান প্রান্তিককরণ প্রয়োজন তাদের জন্য align="right" অ্যাট্রিবিউট যোগ করা হয়েছে। "মন্তব্য" লেবেলটি মাল্টিলাইন পাঠ্যের উপরের সীমানায় অবস্থিত হওয়ার জন্য, সংশ্লিষ্ট কক্ষটি ভ্যালাইন অ্যাট্রিবিউট ব্যবহার করে শীর্ষ-সারিবদ্ধ অবস্থায় সেট করা হয়েছে।
- #পাশে