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

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

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

العنصر ( الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛ العرض: 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 مهمة تمثل بعض الصعوبة للمطورين. ومع ذلك، هناك عدة طرق لحلها، وهي بسيطة للغاية. يقدم هذا الدرس 6 خيارات لتوسيط المحتوى عموديًا.

لنبدأ بوصف عام للمشكلة.

مشكلة التمركز العمودي

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

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

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

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

• في سطر من النص، تكون المحاذاة نسبة إلى ارتفاع السطر.
• تستخدم خلية الجدول المحاذاة بالنسبة لقيمة محسوبة بواسطة خوارزمية خاصة (عادةً ارتفاع الصف).

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

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

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

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

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

لغة البرمجة:

النص المطلوب

CSS:

#child (ارتفاع الخط: 200 بكسل؛)

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

توسيط الصورة باستخدام ارتفاع الخط

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

لغة البرمجة:

CSS:

#parent (ارتفاع الخط: 200 بكسل;) #parent img (محاذاة رأسية: وسط;)

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

طريقة جدول CSS

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

ملاحظة: جدول CSS ليس هو نفسه جدول HTML.

لغة البرمجة:

محتوى

CSS:

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

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

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

عيب هذه الطريقة هو أنها لا تعمل في الإصدارات الأقدم من IE. يجب عليك استخدام العرض: خاصية inline-block للحاوية المتداخلة.

تحديد المواقع المطلقة والهوامش السلبية

تعمل هذه الطريقة أيضًا في جميع المتصفحات. لكنه يتطلب إعطاء العنصر الذي يتم تمركزه ارتفاعًا.

يقوم كود المثال بتنفيذ التوسيط الأفقي والرأسي في نفس الوقت:

لغة البرمجة:

محتوى

CSS:

# الأصل (الموضع: نسبي؛) # الطفل ( الموضع: مطلق؛ الأعلى: 50%؛ اليسار: 50%؛ الارتفاع: 30%؛ العرض: 50%؛ الهامش: -15% 0 0 -25%؛ )

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

هذه الطريقة لا تعمل في جميع المتصفحات

تحديد المواقع المطلقة وتمتد

ينفذ رمز المثال التوسيط الرأسي والأفقي.

لغة البرمجة:

محتوى

CSS:

# الأصل (الموضع: نسبي؛) # الطفل ( الموضع: مطلق؛ الأعلى: 0؛ الأسفل: 0؛ اليسار: 0؛ اليمين: 0؛ العرض: 50%؛ الارتفاع: 30%؛ الهامش: تلقائي؛ )

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

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

لسوء الحظ، هذه الطريقة لا تعمل في IE7 وما دونه.

مسافات متساوية فوق وتحت

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

لغة البرمجة:

محتوى

CSS:

# الأصل ( الحشو: 5% 0; ) # الطفل ( الحشو: 10% 0; )

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

تُستخدم وحدات القياس النسبية لتغيير حجم العناصر ديناميكيًا. وبالنسبة لوحدات القياس المطلقة، سيتعين عليك إجراء العمليات الحسابية.

على سبيل المثال، إذا كان ارتفاع العنصر الأصلي 400 بكسل وكان العنصر المتداخل 100 بكسل، فستكون هناك حاجة إلى 150 بكسل من المساحة المتروكة في الأعلى والأسفل.

150 + 150 + 100 = 400

يتيح لك استخدام % ترك العمليات الحسابية للمتصفح.

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

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

شعبة عائمة

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

لغة البرمجة:

محتوى

CSS:

# الأصل (الارتفاع: 250 بكسل؛) # العائم ( تعويم: يسار؛ الارتفاع: 50%؛ العرض: 100%؛ الهامش السفلي: -50 بكسل؛) # الطفل ( واضح: كلاهما؛ الارتفاع: 100 بكسل؛ )

قمنا بإزاحة div الفارغ إلى اليسار أو اليمين وضبطنا ارتفاعه على 50% من العنصر الأصلي. بهذه الطريقة سوف تملأ النصف العلوي من العنصر الأصلي.

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

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

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

خاتمة

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

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. لأن كل هذا يتم بسبب قواعده.

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

الطريقة الأولى مع ارتفاع الخط

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

المثال الأول. العرض التوضيحي رقم 1

المثال الأول. العرض التوضيحي رقم 1

/* No.1 */ .talign1( الحدود: 1 بكسل أحمر خالص؛ الارتفاع: 200 بكسل;/* ارتفاع الكتلة */ ) .talign1 > p( line-height:200px;/* اضبط ارتفاع الخط وفقًا لارتفاع الكتلة * / هامش :0;/* إزالة الحشو الخارجي، إن وجد */ text-align:center;/* محاذاة النص أفقيًا مع المركز */ الحشو: 0;/* إزالة الحشو الداخلي، إن وجد */ ) /* end رقم 1*/

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

مثال. العرض التوضيحي رقم 2

مثال. العرض التوضيحي رقم 2

/* No.2 */ .talign2( الحدود: 1 بكسل أحمر خالص; ارتفاع الخط: 200 بكسل;/* ارتفاع خط الكتلة */ ) .talign2 div( text-align:center;/* محاذاة العناصر المتمركزة أفقيًا */ ) . talign2 img( Vertical-align:middle;/* محاذاة الصور عموديًا في المنتصف */ border: 1px أسود خالص;) /* النهاية №2*/

المحاذاة مع خاصية الموقف

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

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

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

/* رقم 3 */ .talign3( الحدود: 1 بكسل أحمر خالص؛ الارتفاع: 200 بكسل؛/* ارتفاع الكتلة */ الموضع: نسبي؛ ) .talign3 div( الموضع: مطلق؛ الأعلى: 50%؛ اليسار: 50%؛ الارتفاع : 30%؛ العرض: 50%؛ الهامش: -5% 0 0 -25%؛

المحاذاة مع خاصية الجدول

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

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

مثال. العرض التوضيحي رقم 4

مثال. العرض التوضيحي رقم 4

/* رقم 4 */ .talign4( الحد: 1 بكسل أحمر خالص؛ الارتفاع: 200 بكسل;/* ارتفاع الكتلة */ العرض: جدول؛ العرض: 100%; ) .talign4 div( العرض: خلية جدول؛ محاذاة رأسية: الأوسط؛ محاذاة النص: المركز) /* النهاية #4*/

المحاذاة مع خاصية المرن

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