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

منتصف محاذاة النص

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

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

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

غالبًا ما تُعزى محاذاة الصفحات إلى العلامة نفسها. هذا يجعل الرمز على الفور غير صالح ، حيث تم إهمال سمة المحاذاة بواسطة W3C. لا ينصح باستخدامه على الصفحة.

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

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

• الهامش: 0 تلقائي ؛

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

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

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

• .left (تعويم: يسار ؛)
• .right (عائم: يمين)

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

• .left (تعويم: يسار ؛)
• .right (عائم: يمين)
• تذييل (مسح: كلاهما)

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

انحياز عمودي

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

• محاذاة لأعلى -. طفل (محاذاة رأسية: أعلى) ؛
• محاذاة المركز -. طفل (محاذاة عمودية: وسط) ؛
• محاذاة لأسفل -. طفل (محاذاة عمودية: أسفل) ؛

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

المشاكل المحتملة مع الكتل المحاذاة

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

• .second (عائم: يسار)
• . ثالثًا (عائم: يمين)
• .clearfix (الارتفاع: 0 ؛ مسح: كلاهما ؛)

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

• .left (تعويم: يسار)
• .right (عائم: يمين)
• .container: after (content: ""؛ display: table؛ clear: both؛)

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

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

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

CSS ،

لغة البرمجة

أعتقد أن العديد منكم ممن قاموا بالتخطيط قد عبروا عن الحاجة إلى محاذاة العناصر عموديًا ومعرفة الصعوبات التي تنشأ عند محاذاة عنصر إلى المركز.

نعم ، بالنسبة للمحاذاة الرأسية ، تحتوي CSS على خاصية محاذاة رأسية خاصة بقيم متعددة. في الممارسة العملية ، ومع ذلك ، فإنه لا يعمل على الإطلاق كما هو متوقع. دعنا نحاول معرفة ذلك.

دعنا نقارن الأساليب التالية. يصطف مع:

• الجداول،
• المسافات البادئة ،
• ارتفاع خط،
• تمتد
• هامش سلبي ،
• تحول،
• عنصر زائف
• فليكس بوكس.

كتوضيح ، ضع في اعتبارك المثال التالي.

يوجد قسمان من عناصر div ، أحدهما متداخل في الآخر. دعونا نعطيهم الفصول المقابلة - الخارجي والداخلي.

التحدي هو محاذاة العنصر الداخلي لمركز العنصر الخارجي.

بادئ ذي بدء ، ضع في اعتبارك الحالة عند أبعاد الوحدتين الخارجية والداخلية معروف... دعنا نضيف عرض: كتلة مضمنة إلى العنصر الداخلي ، ومحاذاة النص: محاذاة مركزية وعمودية: من المنتصف إلى الخارجي.

أتذكر أن المحاذاة تنطبق فقط على العناصر التي تحتوي على وضع عرض مضمّن أو مضمن.

دعونا نعطي أحجام المربعات وألوان الخلفية لرؤية حدودها.

خارجي (العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ محاذاة النص: المركز ؛ المحاذاة الرأسية: الوسط ؛ لون الخلفية: #ffc ؛) الداخل (العرض: كتلة مضمنة ؛ العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ لون الخلفية : #fcc؛)
بعد تطبيق الأنماط ، سنرى أن الكتلة الداخلية تتم محاذاتها أفقيًا وليس عموديًا:
http://jsfiddle.net/c1bgfffq/

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

هناك عدة تقنيات لحل هذه المشكلة. أدناه سوف نلقي نظرة فاحصة على كل منهم.

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

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

http://jsfiddle.net/c1bgfffq/1/

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

يمكن إزالة أول ناقص جزئيًا عن طريق استبدال علامات الجدول و td بـ div وتعيين وضع عرض الجدول في CSS.

. router-wrapper (display: table؛) .outer (display: table-cell؛)
ومع ذلك ، فإن الكتلة الخارجية ستظل طاولة مع كل النتائج المترتبة على ذلك.

محاذاة المسافات البادئة

إذا كانت ارتفاعات المربعات الداخلية والخارجية معروفة ، فيمكن ضبط المحاذاة باستخدام الحشو الرأسي للمربع الداخلي باستخدام الصيغة: (H خارجي - H داخلي) / 2.

خارجي (ارتفاع: 200 بكسل ؛) داخلي (ارتفاع: 100 بكسل ؛ الهامش: 50 بكسل 0 ؛)
http://jsfiddle.net/c1bgfffq/6/

الجانب السلبي للحل هو أنه قابل للتطبيق فقط في عدد محدود من الحالات عندما تكون ارتفاعات كلتا الكتلتين معروفة.

محاذاة ارتفاع الخط

إذا كنت تعلم أن الكتلة الداخلية يجب ألا تشغل أكثر من سطر واحد من النص ، فيمكنك استخدام خاصية ارتفاع السطر وتعيينها مساوية لارتفاع الكتلة الخارجية. نظرًا لأن محتوى الكتلة الداخلية يجب ألا يلتف إلى السطر الثاني ، يوصى أيضًا بإضافة المسافة البيضاء: nowrap and overflow: hidden rules.

خارجي (ارتفاع: 200 بكسل ؛ ارتفاع الخط: 200 بكسل ؛). داخلي (مسافة بيضاء: nowrap ؛ تجاوز: مخفي ؛)
http://jsfiddle.net/c1bgfffq/12/

يمكنك أيضًا استخدام هذه التقنية لمحاذاة نص متعدد الأسطر عن طريق إعادة تعريف قيمة ارتفاع السطر للكتلة الداخلية ، وإضافة display: inline-block and vertical-align: middle rules.

خارجي (ارتفاع: 200 بكسل ؛ ارتفاع الخط: 200 بكسل ؛). داخلي (ارتفاع الخط: عادي ؛ عرض: كتلة مضمنة ؛ محاذاة رأسية: وسط ؛)
http://jsfiddle.net/c1bgfffq/15/

عيب هذه الطريقة هو أنه يجب معرفة ارتفاع الكتلة الخارجية.

امتداد المحاذاة

يمكن استخدام هذه الطريقة عندما يكون ارتفاع الوحدة الخارجية غير معروف ، ولكن ارتفاع الوحدة الداخلية معروف.

لهذا تحتاج:

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

.outer (position: النسبي ؛) .inner (الارتفاع: 100 بكسل ؛ الموضع: مطلق ؛ أعلى: 0 ؛ أسفل: 0 ؛ الهامش: تلقائي 0 ؛)
http://jsfiddle.net/c1bgfffq/4/

يتمثل جوهر هذه التقنية في أن تحديد ارتفاع صندوق ممتد وموضع تمامًا يفرض على المتصفح حساب الهوامش الرأسية بنسب متساوية عند التعيين على تلقائي.

التوافق مع قمة الهامش السلبية

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

تحتاج إلى تعيين الموضع النسبي للكتلة الخارجية ، والداخلي - مطلق. ثم تحتاج إلى دفع الصندوق الداخلي لأسفل بنصف ارتفاع الجزء العلوي من الصندوق الخارجي: 50٪ ورفعه لأعلى بمقدار نصف ارتفاع الهامش العلوي الخاص به: -H الجزء الداخلي / 2.

خارجي (موضع: نسبي ؛). داخلي (ارتفاع: 100 بكسل ؛ الموضع: مطلق ؛ أعلى: 50٪ ؛ قمة الهامش: -50 بكسل ؛)
http://jsfiddle.net/c1bgfffq/13/

عيب هذه الطريقة هو أنه يجب معرفة ارتفاع الوحدة الداخلية.

التوافق مع التحويل

تشبه هذه الطريقة الطريقة السابقة ، ولكن يمكن تطبيقها عندما يكون ارتفاع الوحدة الداخلية غير معروف. في هذه الحالة ، بدلاً من تعيين مساحة بكسل سالبة ، يمكنك استخدام خاصية التحويل وتحريك الكتلة الداخلية لأعلى باستخدام وظيفة translateY وقيمة -50٪.

خارجي (الموضع: نسبي ؛). داخلي (الموضع: مطلق ؛ أعلى: 50٪ ؛ تحويل: ترجمة Y (-50٪) ؛)
http://jsfiddle.net/c1bgfffq/9/

لماذا لا يمكن تحديد النسبة بالطريقة السابقة؟ نظرًا لأنه يتم حساب القيم المئوية لخاصية الهامش بالنسبة للعنصر الأصلي ، فإن القيمة 50٪ ستكون نصف ارتفاع الصندوق الخارجي ، وعلينا رفع الصندوق الداخلي بمقدار نصف ارتفاعه. خاصية التحويل مناسبة تمامًا لهذا الغرض.

عيب هذه الطريقة هو أنه لا يمكن تطبيقها إذا كانت الكتلة الداخلية لها موضع مطلق.

محاذاة مع Flexbox

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

يجب ضبط الصندوق الخارجي على العرض: مرن ، ويجب ضبط الصندوق الداخلي على الهامش: تلقائي. وهذا كل شيء! جميل، أليس كذلك؟

خارجي (عرض: مرن ؛ عرض: 200 بكسل ؛ ارتفاع: 200 بكسل ؛) داخلي (عرض: 100 بكسل ؛ هامش: تلقائي ؛)
http://jsfiddle.net/c1bgfffq/14/

عيب هذه الطريقة هو أن Flexbox مدعوم فقط من قبل المتصفحات الحديثة.

أي طريقة تختار؟

من الضروري الانطلاق من بيان المشكلة:

• من أجل المحاذاة الرأسية للنص ، من الأفضل استخدام الحشو الرأسي أو خاصية ارتفاع السطر.
• بالنسبة للعناصر ذات المواضع المطلقة ذات الارتفاع المعروف (مثل الأيقونات) ، فإن خاصية أعلى الهامش السلبي مثالية.
• للحالات الأكثر تعقيدًا ، عندما يكون ارتفاع الكتلة غير معروف ، تحتاج إلى استخدام عنصر زائف أو خاصية التحويل.
• حسنًا ، إذا كنت محظوظًا جدًا لدرجة أنك لا تحتاج إلى دعم الإصدارات القديمة من IE ، فمن الأفضل بالطبع استخدام Flexbox.

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

محاذاة الكتل ذات الأبعاد المعروفة

أسهل طريقة لاستخدام CSS هي محاذاة الكتل ذات الارتفاع المحدد مسبقًا (للمحاذاة الرأسية) أو العرض (للمحاذاة الأفقية).

المحاذاة مع الحشو

في بعض الأحيان لا يمكنك توسيط عنصر ، ولكن يمكنك إضافة حدود إليه باستخدام " حشوة".

على سبيل المثال ، لديك صورة بحجم 200 × 200 بكسل وتريد توسيطها في كتلة بحجم 240 × 300. يمكننا تعيين ارتفاع وعرض الصندوق الخارجي = 200 بكسل ، وإضافة 20 بكسل في الأعلى والأسفل ، و 50 لكل من اليمين واليسار .

.example-wrapper1 (الخلفية: # 535E73 ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ المساحة المتروكة: 20 بكسل 50 بكسل ؛)

محاذاة المربعات الموضوعة تمامًا

إذا تم تعيين الكتلة على " الموقف: مطلق"، ثم يمكن وضعه بالنسبة إلى أقرب الأبوين باستخدام" position: النسبي ". للقيام بذلك ، تحتاج جميع الخصائص (" أعلى","الصحيح","الأسفل","اليسار") قم بتعيين نفس القيمة للوحدة الداخلية ، بالإضافة إلى" margin: auto ".

* هناك فارق بسيط: يجب ألا يتجاوز عرض (ارتفاع) الكتلة الداخلية + قيمة اليسار (يمين ، أسفل ، أعلى) حجم الكتلة الأصلية. من الآمن تعيين الخصائص اليسرى (اليمنى ، السفلية ، العلوية) على 0 (صفر).

.example-wrapper2 (الموضع: نسبي ؛ الارتفاع: 250 بكسل ؛ الخلفية: url (space.jpg) ؛) .cat-king (العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ الموضع: مطلق ؛ أعلى: 0 ؛ يسار: 0 ؛ أسفل: 0؛ يمين: 0؛ هامش: تلقائي؛ خلفية: url (king.png)؛)

محاذاة أفقية

محاذاة مع "محاذاة النص: الوسط"

هناك خاصية خاصة لمحاذاة النص في كتلة " محاذاة النص". عند تعيين القيمة" المركز"سيتم محاذاة كل سطر من النص أفقيًا. بالنسبة للنص متعدد الأسطر ، نادرًا ما يتم استخدام هذا الحل ، وغالبًا ما يمكن العثور على هذا الخيار لمحاذاة الامتدادات أو الروابط أو الصور.

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

.example-text (text-align: center ؛ padding: 10px ؛ background: # FF90B8 ؛)

وتجدر الإشارة إلى أن هذه الخاصية لن تعمل فقط مع النص ، ولكن أيضًا مع أي عناصر مضمنة ("display: inline").

لكن هذا النص محاذي إلى اليسار ، لكنه في الكتلة ، وهو محاذي في المنتصف فيما يتعلق بالغلاف.

.example-wrapper3 (text-align: center؛ background: # FF90B8؛) .inline-text (display: inline-block؛ width: 40٪؛ padding: 10px؛ text-align: left؛ background: # FFEfee؛)

محاذاة المربعات مع الهوامش

تتم محاذاة عناصر الكتلة ذات العرض المعروف أفقيًا بسهولة إذا تم ضبطها على "margin-left: auto ؛ margin-right: auto". عادة ما يتم استخدام الترميز المختصر: " الهامش: 0 تلقائي"(يمكن استخدام أي قيمة بدلاً من الصفر). لكن هذه الطريقة لن تعمل مع المحاذاة الرأسية.

.lama-wrapper (الارتفاع: 200 بكسل ؛ الخلفية: # F1BF88 ؛) .lama1 (الارتفاع: 200 بكسل ؛ العرض: 200 بكسل ؛ الخلفية: url (lama.jpg) ؛ الهامش: 0 تلقائي ؛)

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

انحياز عمودي

هناك الكثير من المشكلات المتعلقة بالمحاذاة الرأسية - على ما يبدو ، لم يتم توفير ذلك في CSS. هناك عدة طرق لتحقيق النتيجة المرجوة ، لكنها كلها ليست جميلة جدًا.

المحاذاة مع خاصية خط الطول

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

.example-wrapper4 (ارتفاع السطر: 100 بكسل ؛ اللون: # DC09C0 ؛ الخلفية: # E5DAE1 ؛ الارتفاع: 100 بكسل ؛ محاذاة النص: المركز ؛)

من الممكن أيضًا تحقيق محاذاة الكتلة مع خطوط متعددة. للقيام بذلك ، سيتعين عليك استخدام كتلة غلاف إضافية ، وضبط ارتفاع الخط عليها. يمكن أن تكون الكتلة الداخلية متعددة الخطوط ، ولكن "مضمنة" مطلوبة. تحتاج إلى تطبيق "محاذاة عمودية: وسط" عليها.

.example-wrapper5 (ارتفاع السطر: 160 بكسل ؛ الارتفاع: 160 بكسل ؛ حجم الخط: 0 ؛ الخلفية: # FF9B00 ؛) .example-wrapper5 .text1 (display: inline-block؛ font-size: 14px؛ line-height: 1.5 ؛ محاذاة رأسية: وسط ؛ الخلفية: # FFFAF2 ؛ اللون: # FF9B00 ؛ محاذاة النص: المركز ؛)

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

المحاذاة الرأسية في الجداول

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

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

.one_product .img_wrapper (display: table-cell؛ height: 169px؛ vertical-align: middle؛ overflow: hidden؛ background: #fff؛ width: 255px؛) .one_product img (max-height: 169px؛ max-width: 100 ٪؛ min-width: 140px؛ display: block؛ margin: 0 auto؛)

يجب أن نتذكر أنه إذا كان العنصر يحتوي على "عائم" بخلاف "لا شيء" ، فسيكون على أي حال كتلة (عرض: كتلة) - ثم سيتعين عليك استخدام كتلة غلاف إضافية.

المحاذاة مع عنصر مضمن إضافي

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

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

.example-wrapper6 (height: 300px؛ text-align: center؛ background: # 70DAF1؛) .pudge (display: inline-block؛ vertical-align: middle؛ background: url (pudge.png)؛ background-color: # fff ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛) .riki (العرض: كتلة مضمنة ؛ الارتفاع: 100٪ ؛ المحاذاة الرأسية: الوسط ؛)

العرض: ثني ومحاذاة

إذا كنت لا تهتم كثيرًا بمستخدمي Explorer 8 ، أو تهتم كثيرًا لدرجة أنك على استعداد لإدخال بعض جافا سكريبت إضافي من أجلهم ، فيمكنك استخدام "display: flex". تقوم المربعات المرنة بعمل رائع في التعامل مع مشكلات المحاذاة ، وكل ما عليك هو كتابة "margin: auto" لتوسيط المحتوى بالداخل.

حتى الآن ، لم تصادفني هذه الطريقة عمليًا ، لكن لا توجد قيود خاصة عليها.

.example-wrapper7 (display: flex؛ height: 300px؛ background: # AEB96A؛) .example-wrapper7 img (margin: auto؛)

حسنًا ، هذا كل ما أردت كتابته عن محاذاة CSS. الآن لن يكون تركيز المحتوى مشكلة!

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

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

الطريقة الأولى

تفترض هذه الطريقة أننا نضع بعض العناصر