কেন্দ্রীভূত: সিএসএস-বিন্যাস

যখন পৃষ্ঠার লেআউট প্রায়ই একটি কেন্দ্রিক সিএসএস-পথ পরিষ্কার করা প্রয়োজন: যেমন, প্রধান ইউনিট কেন্দ্রে। সেখানে এই সমস্যার বিভিন্ন সমাধান, প্রতিটি যা কখনো কখনো কোনো সংকেতপদ্ধতিরচয়িতা ব্যবহার করতে হবে হবে।

কেন্দ্রে পাঠ্য সারিবদ্ধ

প্রায়শই আলংকারিক উদ্দেশ্যে আপনি এই ক্ষেত্রে টেক্সট কেন্দ্রিক, সিএসএস সেট করতে, আরোপ এর সময় কমাতে চাই। পূর্বে এই HTML-বৈশিষ্ট্যাবলী ব্যবহার করা হয়েছিল, কিন্তু এখন মানক শৈলী পত্রক পাঠ্য সারিবদ্ধ প্রয়োজন। ব্লক যার জন্য আপনি মধ্যম একটি একক লাইন দিয়ে তৈরি করা হয় পাঠ্যের সিএসএস প্রান্তিককরণ বাইরের প্যাডিং পরিবর্তন করতে চান বিপরীতে:

• টেক্সট প্রান্তিককরণ: কেন্দ্র;

এই সম্পত্তি উত্তরাধিকার হিসেবে প্রাপ্ত এবং পিতা বা মাতা থেকে সব শিশুদের পাস করা হয়েছে। এটা না শুধুমাত্র টেক্সট কিন্তু অন্যান্য উপাদান প্রভাবিত করে। এই উদ্দেশ্যে তারা ছোট হাতের অক্ষরে হবে (যেমন, বিঘত) অথবা সারি-ব্লক (যে কোন ব্লক যে প্রদর্শন সম্পত্তি উল্লেখ করুন: ব্লক)। আধুনিক বিকল্প এছাড়াও আপনি প্রস্থ এবং উপাদান উচ্চতা, খাঁজ আরো নমনীয় কনফিগারেশন পরিবর্তন করতে পারবেন।

পৃষ্ঠাগুলি প্রায়ই ট্যাগ নিজেকে অ্যাট্রিবিউট সারিবদ্ধ। এই অবিলম্বে কোডটি অবৈধ করে, সেক্ষেত্রে W3C এর স্বীকার সারিবদ্ধ অ্যাট্রিবিউট অপ্রচলিত। একটি পৃষ্ঠায় এটি ব্যবহার সুপারিশ করা হয়।

কেন্দ্রীভূত ব্লক

বহিরাগত প্যাডিং মার্জিন ব্যবহার: আপনি মধ্যম মধ্যে div প্রান্তিককরণ সেট করতে চান তাহলে, সিএসএস বেশ একটি আরামদায়ক উপায় অফার করতে পারেন। প্যাডিং ব্লক উপাদান, এবং লাইন-ব্লক হিসাবে নির্দিষ্ট করা যেতে পারে। Svoysva মান 0 (উল্লম্ব প্যাডিং), এবং স্বয়ং (অনুভূমিকভাবে স্বয়ংক্রিয় খাঁজ) হওয়া উচিত:

• মার্জিন: 0 স্বয়ংক্রিয়;

এখন এই অপশনটি একেবারে বৈধ হিসেবে স্বীকৃত। সিএসএস-মার্জিন সম্পত্তি আমাদের পৃষ্ঠাতে পজিশনিং উপাদান যুক্ত অনেক সমস্যার সমাধানের অনুমতি দেয়: বহিরাগত প্যাডিং ব্যবহার আপনি কেন্দ্র প্রান্তিককরণ নির্ধারণ করতে পারবেন।

ব্লক বাম বা ডান প্রান্ত সারিবদ্ধতা

কখনও কখনও সিএসএস-ওয়ে কেন্দ্র প্রান্তিককরণ প্রয়োজন হয় না, কিন্তু এটা আগামী দুই ব্লক, বাম দিক থেকে এক ও অন্যান্য লাগাতে প্রয়োজনীয় - ডান থেকে। এই সেখানে ভাসা সম্পত্তি, যা তিন মান এক গ্রহণ করতে পারেন: বাম ডান বা কিছুই। ধরুন আপনি দুই ব্লক যে পাশাপাশি স্থাপন করা উচিত করি। তারপর কোড নিম্নরূপ:

• .left {float: left;}
• .right {ভাসা: ডান}

যদি কোনো তৃতীয় ব্লক, যেখানে প্রথম দুইটি ব্লক (যেমন, ফুটার) অধীনে অবস্থিত হওয়া আবশ্যক হয়, তাহলে এটা স্পষ্ট বৈশিষ্ট্য রেজিস্টার প্রয়োজনীয়:

• .left {float: left;}
• .right {ভাসা: ডান}
• পাদচরণ {পরিষ্কার: উভয়}

সত্য যে মোট প্রবাহ থেকে বের বাম এবং ডান পতনের শ্রেণীর সঙ্গে ব্লক, অর্থাৎ সব অন্যান্য উপাদানের প্রান্তিককৃত উপাদানের খুব অস্তিত্ব উপেক্ষা করেছেন। প্রপার্টি পরিষ্কার: উভয় পাদচরণ ব্লক বা অন্য কোন দৃশ্যমান প্রবাহ কোষ থেকে ত্বরান্বিত দেয় এবং উভয় বাম এবং ডান দিকে মোড়ানো (ভাসা) নিষিদ্ধ করে। অতএব, আমাদের উদাহরণে, ফুটার নিম্নগামী বাস্তুচ্যুত হয়।

উল্লম্ব প্রান্তিককরণ

সেখানে ক্ষেত্রে যেখানে সিএসএস-উপায়ে কেন্দ্র প্রান্তিককরণ সেট করতে যথেষ্ট নয়, এছাড়াও আপনি সন্তান ব্লক উল্লম্ব অবস্থানে পরিবর্তন করতে হবে। কোন রেখা বা সারি-ব্লক উপাদান ঊর্ধ্ব বা নিম্ন প্রান্ত বিরুদ্ধে চাপা করা যেতে পারে, পিতা বা মাতা উপাদান মাঝখানে অবস্থিত বা একটি অবাধ অবস্থান হতে। ব্লক কেন্দ্রে প্রান্তিককরণ প্রয়োজন বেশিরভাগ ক্ষেত্রে, এটা উল্লম্ব প্রান্তিককরণ অ্যাট্রিবিউট ব্যবহার করে। ধরুন দুই ব্লক, এক অপরের মধ্যে নেস্টেড আছে। সারি-ব্লক উপাদান (: ইনলাইন-ব্লক প্রদর্শন) - এই অন্দর ইউনিটে। এটা তোলে উল্লম্ব ব্লক শিশু সারিবদ্ধ প্রয়োজনীয়:

• উপরের সীমানা প্রান্তিককরণ - .child {উল্লম্ব প্রান্তিককরণ: উপরে};
• কেন্দ্রিক - .child {উল্লম্ব প্রান্তিককরণ: মধ্য};
• নীচের প্রান্ত প্রান্তিককরণ - .child {উল্লম্ব প্রান্তিককরণ: নীচে};

ব্লক উপাদান অডিও টেক্সট প্রান্তিককরণ, অথবা উল্লম্ব প্রান্তিককরণ প্রযোজ্য নয়।

সারিবদ্ধ ইউনিট সম্ভাব্য সমস্যার

কখনও কখনও div সিএসএস-ওয়ে কেন্দ্রে সারিবদ্ধ একটু কষ্ট হতে পারে। উদাহরণস্বরূপ, যখন একটি float ব্যবহার করছে: .first, .second এবং .third: যেমন, তিনটি ব্লক। দ্বিতীয় ও তৃতীয় ব্লক প্রথম থাকা। একটি বর্গ সঙ্গে একটি উপাদান দ্বিতীয় বাম-প্রান্তিক, এবং শেষ ব্লক - ডান দিকে। সমতলতা পর দুই প্রবাহ থেকে ছেড়ে দিয়েছিলেন। পিতা বা মাতা উপাদান উচ্চতা সংজ্ঞায়িত করা না থাকলে (যেমন, 30em), এটা সাবসিডিয়ারি ইউনিট উচ্চতা প্রসারিত করতে বন্ধ করে দিবে। একটি বিশেষ ইউনিট, যা .second এবং .third উদ্ধার - এই ত্রুটি এড়ানোর জন্য, "স্পেসার" ব্যবহার। সিএসএস-কোড:

• .second {ভাসা: বামে}
• .third {ভাসা: ডান}
• .clearfix {উচ্চতা: 0; পরিষ্কার: উভয়;}

ছদ্ম প্রায়ই ব্যবহৃত: পর, যা psevdorasporki তৈরি করে স্থানে ব্লক ফিরে যাওয়ার অনুমতি দেয় (ক্লাস সঙ্গে DIV আছে মধ্যে উদাহরণে ধারক ভিতরে অবস্থিত এবং একটি .first .left এবং .right গঠিত):

• .left {ভাসা: বামে}
• .right {ভাসা: ডান}
• .container: {বিষয়বস্তু পর: ''; প্রদর্শন: টেবিল; পরিষ্কার: উভয়;}

উপরের বিকল্প - সবচেয়ে সাধারণ, যদিও কিছু তারতম্য আছে। আপনি সর্বদা পরীক্ষা করে psevdorasporki তৈরি করার সহজতম এবং সবচেয়ে সুবিধাজনক উপায় খুঁজে পেতে পারেন।

আরেকটি সমস্যা ঘন ঘন বিন্যাস সম্মুখীন - লাইন ব্লক উপাদান প্রান্তিককরণ। তাদের প্রতিটি পর একটি স্পেস স্বয়ংক্রিয়ভাবে যোগ করা হয়। হ্যান্ডেল এটা মার্জিন সম্পত্তি, যা নেতিবাচক খাঁজ দ্বারা সংজ্ঞায়িত করা হয় সাহায্য করে। সেখানে অন্য কোন উপায়ে, যা, কম ঘন ঘন ব্যবহৃত হয় উদাহরণস্বরূপ, রিসেট হয় ফন্টের আকার। এই ক্ষেত্রে, পিতা বা মাতা উপাদান বৈশিষ্ট্য খাতাপত্র ফন্ট সাইজ: 0। তাহলে টেক্সট ব্লক মধ্যে অবস্থিত, লাইন-ব্লক উপাদানের বৈশিষ্ট্য পছন্দসই ফন্ট সাইজ কাছে ফিরে এসেছ। উদাহরণস্বরূপ, ফন্ট-আকার: 1em। পদ্ধতি সবসময় সুবিধাজনক না, তাই এটি আরো অনেক কিছু সাধারণভাবে বহিরাগত মার্জিন সঙ্গে সংস্করণ ব্যবহার করা হয়।

একটি ছোট স্থান বিষয়ে সাধারণ বিন্যাস এবং লেআউট, ও দোকান এ জিনিসপত্র অবস্থান, এবং ফটো: ব্লক সমতলতা আপনি সুন্দর এবং কার্যকরী পেজ তৈরি করতে পারবেন।