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

فيما يلي بعض تقنيات المحاذاة العمودية الشائعة بين مصممي التخطيط. ويوضح كيفية عملهم وفي أي الحالات يكون كل واحد منهم أكثر ملاءمة.

فيما يلي عنصران div:

سيتم استخدام كل طريقة لمحاذاة الوحدة الداخلية مع مركز الوحدة الخارجية.

ارتفاع الخط لخط واحد

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

لن يكون من الممكن استخدام النسبة المئوية لارتفاع السطر = 100%، لأن 100% في هذه الحالة هو ارتفاع الخط.

حاوية (
الارتفاع: 300 بكسل؛
ارتفاع الخط: 300 بكسل؛
}

داخلي (
المساحة البيضاء: nowrap؛
إخفاء الفائض؛
}

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

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

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

خط الأساس - الافتراضي؛
. أسفل - المحتوى في الجزء السفلي من الخلية؛
. الأوسط - المحتوى في منتصف الخلية؛
. أعلى - المحتوى الموجود في أعلى الخلية.

في المثال الأول، تصبح خلية جدول واحدة هي الكتلة الخارجية.

حاوية (
العرض: خلية الجدول؛
محاذاة رأسية: وسط؛
}

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

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

المجمع الخارجي (
جدول العرض؛
}

حاوية (
العرض: خلية الجدول؛
محاذاة رأسية: وسط؛
}

الموضع: المطلق + الهامش السلبي

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

تؤدي قيمة الخاصية العليا البالغة 50% إلى وضع العنصر المتداخل بحيث تكون حافته العلوية في منتصف الكتلة الخارجية. كل ما تبقى هو رفع قمة الهامش السلبي بمقدار نصف ارتفاعه بحيث يقف تمامًا في منتصف العمودي.

حاوية (
الموقف: نسبي؛
}

داخلي (
الارتفاع: 140 بكسل؛
الموقف: مطلق؛
أعلى: 50%؛
الهامش العلوي: -70 بكسل؛
}

عيب هذه الطريقة هو الحاجة إلى معرفة طول الطفل.

المحاذاة تتماشى مع المحاذاة العمودية

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

إذا كان ارتفاع الأصل معروفًا، فيمكن استخدام هذه الخاصية لتوسيط النص متعدد الأسطر.

بالنسبة للكتلة الخارجية، يتم تحديد توسيط خط واحد.

حاوية (
الارتفاع: 140 بكسل؛
ارتفاع الخط: 140 بكسل؛
}

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

داخلي (
العرض: كتلة مضمنة؛
ارتفاع الخط: عادي؛
محاذاة رأسية: وسط؛
}

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

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

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

الخاصية العلوية بقيمة 50% تخفض الكتلة الداخلية بحيث يتم وضع حافتها العلوية في منتصف الكتلة الأم. قيمة TranslatorY: -50% ترفع العنصر إلى نصف ارتفاعه وبالتالي تتم محاذاة المراكز الرأسية للكتل.

حاوية (
الموقف: نسبي؛
}

داخلي (
الموقف: مطلق؛
أعلى: 50%؛
تحويل: ترجمة Y(-50%);
}

عيب هذه التقنية هو الدعم المحدود لوظائف التحويل في متصفح IE.

المحاذاة عبر العنصر الزائف

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

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

الحاوية: قبل (
محتوى: ""؛
الارتفاع: 100%؛
محاذاة رأسية: وسط؛
العرض: كتلة مضمنة؛
}

داخلي (
العرض: كتلة مضمنة؛
محاذاة رأسية: وسط؛
}

طريقة عالمية. لا يعمل إذا تم ضبط الوحدة الداخلية على الوضع المطلق.

فليكس بوكس

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

حاوية (
العرض: فليكس؛
العرض: 320 بكسل؛
الارتفاع: 140 بكسل؛
}

داخلي (
العرض: 120 بكسل؛
الهامش: تلقائي؛
}

يعمل Flexbox فقط في المتصفحات الحديثة.

اختيار الطريقة

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

ارتفاع العناصر غير معروف

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

1. الجدول. يصبح الأصل خلية جدول تم إنشاؤها بتنسيق HTML أو عبر Display-table/display-cell. يتم إعطاء هذا العنصر الأصلي محاذاة رأسية: وسط.

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

3. التحول. يحصل الوالد على المنصب: نسبي. يتم إعطاء الطفل الموضع: مطلق، الأعلى: 50% والتحويل: TranslateY(-50%);

4. فليكس بوكس. يتم ضبط الكتلة الخارجية على العرض: flex، ويتم إعطاء الكتلة الداخلية هامشًا: auto.

طول الطفل معروف فقط

يتم وضع الوحدة الخارجية نسبيًا؛ يتم إعطاء العنصر الداخلي موضعًا مطلقًا، الجزء العلوي: 50% وهامش أعلى يساوي نصف ارتفاعه.

سطر واحد لكل كتلة مع ارتفاع معروف

تُعطى الكتلة الخارجية خاصية ارتفاع الخط بقيمة تساوي ارتفاعها.

ارتفاع الكتلة الخارجية معروف، لكن العنصر الداخلي غير معروف.

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

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

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

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

المحاذاة باستخدام الحشو

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

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

.example-wrapper1 ( الخلفية : #535E73 ; العرض : 200px ; الارتفاع : 200px ; الحشو : 20px 50px ; ) محاذاة الكتل ذات الموضع المطلق

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

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

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

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

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

.مثال للنص (محاذاة النص: المركز؛ الحشو: 10 بكسل؛ الخلفية: #FF90B8؛)

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

لكن هذا النص محاذٍ إلى اليسار، ولكنه موجود في كتلة متمركزة بالنسبة للغلاف.

.example-wrapper3 (محاذاة النص: المركز؛ الخلفية: #FF90B8؛) .نص سطري (عرض: كتلة مضمنة؛ العرض: 40%؛ الحشو: 10 بكسل؛ محاذاة النص: يسار؛ الخلفية: #FFE5E5؛) محاذاة كتل باستخدام الهامش

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

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

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

انحياز عمودي

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

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

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

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

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

.example-wrapper5 (ارتفاع الخط: 160 بكسل؛ الارتفاع: 160 بكسل؛ حجم الخط: 0؛ الخلفية: #FF9B00؛) .example-wrapper5 .text1 (العرض: كتلة مضمّنة؛ حجم الخط: 14 بكسل؛ ارتفاع الخط: 1.5؛ محاذاة عمودية: الخلفية: #FFFAF2؛

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

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

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

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

.one_product .img_wrapper (العرض: خلية جدول؛ الارتفاع: 169 بكسل؛ محاذاة عمودية: الوسط؛ الفائض: مخفي؛ الخلفية: #fff؛ العرض: 255 بكسل؛) .one_product img (أقصى ارتفاع: 169 بكسل؛ الحد الأقصى للعرض: 100 الحد الأدنى للعرض: 140 بكسل؛ العرض: كتلة؛

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

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

وبالنسبة للعناصر المضمنة، يمكنك استخدام "vertical-align: middle". سيؤدي هذا إلى محاذاة جميع العناصر مع "display: inline" الموجودة على نفس السطر بالنسبة إلى خط مركزي مشترك.

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

.example-wrapper6 (الارتفاع: 300 بكسل؛ محاذاة النص: المركز؛ الخلفية: #70DAF1؛) .pudge (العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛ الخلفية: url(pudge.png) ؛ لون الخلفية: # fff ؛ العرض: 200 بكسل؛ الارتفاع: 200 بكسل .riki (العرض: كتلة مضمنة؛ الارتفاع: 100%؛ محاذاة رأسية: وسط؛) العرض: مرن ومحاذاة

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

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

.example-wrapper7 ( العرض : flex ؛ الارتفاع : 300px ؛ الخلفية : #AEB96A ; ) .example-wrapper7 img ( الهامش : تلقائي ; )

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

في كثير من الأحيان، يكون من الضروري في التخطيط توسيط بعض العناصر أفقيًا و/أو رأسيًا. لذلك، قررت أن أكتب مقالًا بطرق مختلفة للتوسيط، بحيث يكون كل شيء في متناول اليد في مكان واحد.

هامش المحاذاة الأفقية: تلقائي

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

العنصر ( الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛ العرض: 50%؛ )

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

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

هذه الطريقة مناسبة لتوسيط النص داخل الكتلة. محاذاة النص: المركز:

المحاذاة مع محاذاة النص .wrapper ( محاذاة النص: المركز؛ )

أنا مركز الانحياز

الموقف والهامش السلبي الأيسر

مناسبة للكتل المركزية ذات العرض المعروف. نعطي موضع الكتلة الأصلية: بالنسبة إلى الموضع بالنسبة إليه، موضع العنصر المركزي: مطلق، يسار: 50% وهامش يسار سلبي قيمته تساوي نصف عرض العنصر:

المحاذاة مع الموضع .wrapper ( الموضع: نسبي؛ ) .wrapper p ( يسار: 50%؛ الهامش: 0 0 0 -100px؛ الموضع: مطلق؛ العرض: 200px; )

أنا مركز الانحياز

العرض: كتلة مضمنة + محاذاة النص: المركز

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

المحاذاة مع العرض: كتلة مضمنة + محاذاة النص: مركز؛ .navigation (محاذاة النص: المركز؛) .navigation li (العرض: كتلة مضمّنة؛)

• بيت
• عن المؤلف

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

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

ارتفاع الخط .المغلف ( الارتفاع: 100 بكسل؛ ارتفاع الخط: 100 بكسل؛ )

أنا الانحياز عموديا

الموقف والهامش السلبي لأعلى

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

الغلاف (الموضع: نسبي؛) العنصر (الارتفاع: 200 بكسل؛ الهامش: -100 بكسل 0 0؛ الموضع: مطلق؛ الأعلى: 50%؛)

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

العرض: خلية الجدول

بالنسبة للمحاذاة الرأسية، يتم تطبيق خاصية العرض: خلية الجدول على العنصر، مما يفرض عليه محاكاة خلية جدول. قمنا أيضًا بتعيين ارتفاعه ومحاذاته الرأسية: middle . لنقم بتجميع كل هذا في حاوية تحتوي على الخاصية dislpay: table; :

عرض المحاذاة العمودية: خلية جدول .wrapper ( العرض: جدول؛ العرض: 100%؛ ) .خلية ( العرض: خلية جدول؛ الارتفاع: 100 بكسل؛ محاذاة رأسية: وسط؛ )

أنا الانحياز عموديا

المحاذاة الديناميكية لعنصر على الصفحة

لقد بحثنا في طرق لمحاذاة العناصر على الصفحة باستخدام CSS. الآن دعونا نلقي نظرة على تنفيذ jQuery.

لنقم بربط jQuery بالصفحة:

أقترح كتابة دالة بسيطة لتوسيط عنصر ما في الصفحة، لنسميها alignCenter() . العنصر نفسه يعمل كوسيطة للوظيفة:

الدالة alignCenter(elem) ( // الكود هنا )

في نص الدالة، نقوم ديناميكيًا بحساب إحداثيات مركز الصفحة وتعيينها لخصائص CSS اليسرى والعليا:

دالة alignCenter(elem) ( elem.css(( يسار: ($(window).width() - elem.width()) / 2 + "px"، أعلى: ($(window).height() - elem. height()) / 2 + "px" // لا تنس إضافة الموضع: المطلق للعنصر لتشغيل الإحداثيات )) )

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

الوظيفة جاهزة، كل ما تبقى هو إرفاقها بأحداث جاهزية DOM وتغيير حجم النافذة:

$(function() ( // استدعاء وظيفة التوسيط عندما يكون DOM جاهزًا alignCenter($(elem)); // استدعاء الوظيفة عند تغيير حجم النافذة $(window).resize(function() ( alignCenter($(elem) ))) // وظيفة توسيط العنصر function alignCenter(elem) ( elem.css(( // حساب الإحداثيات اليسرى والعليا على اليسار: ($(window).width() - elem.width()) / 2 + " px"، أعلى: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

تطبيق فليكس بوكس

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

الغلاف (العرض: -webkit-box؛ العرض: -moz-box؛ العرض: -ms-flexbox؛ العرض: -webkit-flex؛ العرض: flex؛ الارتفاع: 500 بكسل؛ العرض: 500 بكسل؛) .wrapper .content (الهامش: تلقائي؛ /* الهامش: 0 تلقائي؛ أفقي فقط */ /* الهامش: عمودي فقط */ ) لوريم إيبسوم دولور سيت أميت

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

موارد ذات الصلة مساعدة المشروع

CSS

لغة البرمجة

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

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

دعونا نقارن الأساليب التالية. المحاذاة باستخدام:

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

للتوضيح، خذ بعين الاعتبار المثال التالي.

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

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

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

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

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

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

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

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

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

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

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

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

.المغلف الخارجي (العرض: الجدول؛) .الخارجي (العرض: خلية الجدول؛)
ومع ذلك، فإن الكتلة الخارجية ستظل طاولة مع كل العواقب المترتبة على ذلك.

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

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

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

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

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

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

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

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

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

للقيام بذلك تحتاج:

تعيين الموضع النسبي للكتلة الخارجية، والموضع المطلق للكتلة الداخلية؛

أضف القواعد أعلى: 0 وأسفل: 0 إلى الكتلة الداخلية، ونتيجة لذلك سوف تمتد إلى ارتفاع الكتلة الخارجية بالكامل؛

اضبط الحشو الرأسي للكتلة الداخلية على الوضع التلقائي.

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

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

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

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

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

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

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

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

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

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

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

يجب ضبط الكتلة الخارجية على العرض: flex والكتلة الداخلية على الهامش: auto . وهذا كل شيء! جميل، أليس كذلك؟

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

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

ما الطريقة التي يجب أن أختارها؟ عليك أن تبدأ من بيان المشكلة:

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

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

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

على سبيل المثال، خذ بعين الاعتبار الجزء التالي:

شعبة (
الحدود: 1 بكسل صلب #000؛
الارتفاع: 10 م؛
العرض: 10 م؛
}


بعض النصوص

وحاول محاذاة النص عموديًا إلى منتصف الكتلة وإلى الحافة السفلية للكتلة.

حل مشكلة المتصفحات "الصحيحة" (بما في ذلك MSIE

تدعم معظم المتصفحات الحديثة CSS2.1، وهي قيمة خلية الجدول لخاصية العرض. يمنحنا هذا الفرصة لإجبار كتلة من النص على الظهور كخلية جدول، والاستفادة من ذلك، محاذاة النص عموديًا:

شعبة (
العرض: خلية الجدول؛
محاذاة رأسية: وسط؛
}

شعبة (
العرض: خلية الجدول؛
محاذاة عمودية: أسفل؛
}

إنترنت إكسبلورر (حتى الإصدار 7 ضمناً)

يمكنك حل مشكلة محاذاة النص إلى الحافة السفلية للكتلة في MSIE باستخدام الموضع المطلق (هنا سنحتاج إلى عنصر سلسلة متداخل في الكتلة):

شعبة (
الموقف: نسبي؛
}
نطاق القسم(
العرض محجوب؛
الموقف: مطلق؛
الأسفل: 0%؛
اليسار: 0%؛
العرض: 100%؛
}

تعمل مجموعة القواعد هذه أيضًا في المتصفحات "الصحيحة".

تحديد الخصائص

نطاق القسم (
العرض محجوب؛
العرض: 100%؛
}

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

لمحاذاة النص عموديًا في منتصف الكتلة، يجب أن يكون الجزء الأصلي معقدًا - سنقدم عنصر سطر آخر:

المواد المراد دراستها:

• التمركز العمودي في CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• التوسيط العمودي باستخدام CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• محاذاة عمودية (www.cssplay.co.uk/ie/valign.html)
• محاذاة عمودية: وسط (cssing.org.ua/2005/07/14/vertical-align-middle/)
• طريقة أخرى للمحاذاة الرأسية في CSS (cssing.org.ua/2007/04/26/another-css-vaalign-method)