محاذاة المركز: تخطيط كس

عندما يكون تخطيط الصفحة ضروريًا في الغالبمحاذاة الوسط بطريقة CSS: على سبيل المثال ، توسيط الكتلة الرئيسية. هناك العديد من الخيارات لحل هذه المشكلة ، يجب استخدام كل منها عاجلاً أم آجلاً من قبل أي نوع حروف.

محاذاة النص إلى المركز

في كثير من الأحيان لأغراض الديكور تحتاج إلى أن تسألمحاذاة النص في الوسط ، يمكن لـ CSS في هذه الحالة تقليل وقت التخطيط. في السابق ، تم ذلك باستخدام سمات HTML ، ولكن الآن يتطلب المعيار محاذاة النص باستخدام أوراق الأنماط. على عكس الكتل التي تحتاج إلى تغيير الهوامش الخارجية لها ، يتم إجراء محاذاة نص CSS في الوسط باستخدام سطر واحد:

• محاذاة النص: المركز ؛

هذه الخاصية موروثة وتم تمريرها من الأصل.لجميع النسل. لا يؤثر فقط على النص ، ولكن أيضًا على العناصر الأخرى. للقيام بذلك ، يجب أن تكون صغيرة (على سبيل المثال ، span) أو صغيرة (أي كتل تحتوي على شاشة العرض: مجموعة خاصية block). يتيح لك الخيار الأخير أيضًا تغيير عرض العنصر وارتفاعه ، وضبط المسافة البادئة بمرونة أكبر.

غالبًا ما تنسب محاذاة الصفحات إلى العلامة نفسها. هذا على الفور يجعل الشفرة غير صالحة لأن W3C جعلت سمة المحاذاة قديمة. استخدامه على صفحة غير مستحسن.

مركز كتلة المحاذاة

إذا كنت بحاجة إلى ضبط محاذاة div في المركز ، CSSقد توفر طريقة مريحة إلى حد ما: استخدام المسافات البادئة للهامش الخارجي. يمكن تعيين المسافة البادئة لكل من عناصر الكتلة وكتل الخط. يجب أن تأخذ قيمة الخاصية القيمتين 0 (المسافة البادئة العمودية) و auto (المسافة البادئة الأفقية التلقائية):

• الهامش: 0 السيارات ؛

الآن بالضبط هذا الخيار معترف به تماماصالحة. يتيح لك استخدام المسافة البادئة أيضًا ضبط محاذاة الصورة في المنتصف: تتيح لك خاصية هامش CSS حل العديد من المشكلات المرتبطة بوضع عنصر على الصفحة.

كتلة اليسار أو اليمين محاذاة

في بعض الأحيان يكون محاذاة الوسط بطريقة CSS غير كذلكمطلوب ، ولكن عليك وضع كتلتين جنبًا إلى جنب: واحدة من الحافة اليسرى ، والآخر من اليمين. للقيام بذلك ، هناك خاصية تعويم يمكن أن تأخذ إحدى القيم الثلاث: يسار ، يمين ، أو لا شيء. افترض أن لديك كتلتين يجب وضعهما جنبًا إلى جنب. ثم سيكون الرمز مثل هذا:

• .left {float: left؛}
• .right {float: right}

إذا كان هناك أيضًا كتلة ثالثة ، والتي يجب أن تكون موجودة أسفل الكتلتين الأوليين (على سبيل المثال ، تذييل الصفحة) ، فستحتاج إلى تسجيل الخاصية الواضحة:

• .left {float: left؛}
• .right {float: right}
• تذييل الصفحة {clear: both}

والحقيقة هي أن كتل مع الطبقات اليسار واليمينالتسرب من التدفق العام ، أي أن جميع العناصر الأخرى تتجاهل وجود العناصر المحاذية ذاتها. الإخلاء: كلاهما يسمحان لتذييل الصفحة أو أي كتلة أخرى برؤية العناصر التي سقطت من الدفق وتحظر الطفو على اليسار وعلى اليمين. لذلك ، في مثالنا ، سوف ينتقل تذييل الصفحة.

المحاذاة العمودية

هناك أوقات لا يكفي طرحهاالمحاذاة المركزية في طرق CSS ، لا تزال بحاجة إلى تغيير الوضع العمودي للكتلة التابعة. يمكن ضغط أي عنصر مضمن أو عنصر كتلة مضمنة على الحافة العلوية أو السفلية ، الموجودة في منتصف العنصر الأصل ، أو في أي مكان. غالبًا ما تكون محاذاة الكتلة في المنتصف مطلوبة ؛ لذلك ، يتم استخدام سمة المحاذاة العمودية. افترض أن هناك كتلتين ، واحدة متداخلة في الأخرى. في هذه الحالة ، تكون الكتلة الداخلية عنصر كتلة سطر (عرض: كتلة مضمّنة). من الضروري محاذاة كتلة الطفل عموديًا:

• محاذاة أعلى - .child {vertical-align: top} ؛
• مركز المحاذاة - .child {vertical-align: middle} ؛
• محاذاة القاع - .child {vertical-align: bottom}؛

لا تؤثر محاذاة النص ولا المحاذاة الرأسية على عناصر الكتلة.

المشاكل المحتملة مع كتل الانحياز

في بعض الأحيان توسيط div بطريقة CSSقد يسبب مشاكل بسيطة. على سبيل المثال ، عند استخدام float: لنفترض أن هناك ثلاث كتل: .first و .second و. third. الكتل الثانية والثالثة في الأول. عنصر في الفئة الثانية محاذٍ لليسار والكتل الأخير محاذٍ لليمين. بعد التسوية ، سقط كلاهما خارج الدفق. إذا لم يكن للعنصر الرئيسي ارتفاع (على سبيل المثال ، 30em) ، فسيتوقف عن الامتداد على طول ارتفاع الكتل الفرعية. لتجنب هذا الخطأ ، استخدم "فاصل" - كتلة خاصة ترى .الثانية والثالثة. كود CSS:

• .second {float: left}
• . الثالثة {float: right}
• .clearfix {height: 0؛ واضح: كلاهما ؛}

كثيرا ما تستخدم فئة الزائفة:بعد ذلك ، والذي يسمح لك أيضًا بإرجاع الكتل إلى مكانها عن طريق إنشاء مقسم زائف (في المثال في div مع الحاوية ، تقع داخل. أولًا وتتضمن .ft و .right):

• .left {float: left}
• .right {float: right}
• .container: after {content: ""؛ عرض: الجدول. واضح: كلاهما ؛}

الخيارات المذكورة أعلاه هي الأكثر شيوعًا ، على الرغم من وجود العديد من الاختلافات. يمكنك دائمًا العثور على أسهل الطرق وأكثرها ملاءمة لإنشاء عينات زائفة عن طريق التجربة.

قضية أخرى واجهت في كثير من الأحيانأنواع الحروف ، - محاذاة عناصر كتلة الخط. بعد كل واحد منهم ، يتم إضافة مساحة تلقائيا. تساعد خاصية الهامش ، والتي تم تعيينها على مسافة بادئة سالبة ، في التعامل مع هذا. هناك طرق أخرى يتم استخدامها بشكل متكرر أقل: على سبيل المثال ، إعادة تعيين حجم الخط. في هذه الحالة ، يتم تحديد حجم الخط: 0 في خصائص العنصر الأصل. إذا كان النص موجودًا داخل الكتل ، فسيتم إرجاع حجم الخط المطلوب بالفعل في خصائص عناصر الكتلة المضمنة. على سبيل المثال ، حجم الخط: 1em. الطريقة ليست مريحة دائمًا ، لذلك ، يتم استخدام خيار المسافة البادئة كثيرًا.

تسمح لك محاذاة الكتل بإنشاء صفحات جميلة وعملية: هذا هو التخطيط العام ، وموقع البضائع في المتاجر عبر الإنترنت ، والصور الفوتوغرافية على موقع بطاقة العمل.