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/

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

المحاذاة باستخدام "الامتداد"

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

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

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

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

صياغة المشكلة:تحتاج إلى توسيط محتويات كتلة متغيرة الارتفاع بالنسبة إلى الوضع الرأسي.

الآن لنبدأ في حل المشكلة.

وهكذا، لدينا كتلة، يمكن أن يتغير ارتفاعها:

أول ما يتبادر إلى ذهنك هو القيام بالخدعة التالية:

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

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

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

المحاذاة العمودية للعناصر المضمنة

لنفترض أن لديك سطرًا من النص مقسمًا بواسطة علامات الأسطر إلى أجزاء:

أنت يرحب قطعةنص!

العلامة المضمنة هي حاوية لا يؤدي مظهرها إلى التفاف المحتوى في سطر جديد.

يؤدي إجراء علامة الكتلة إلى التفاف محتويات الحاوية في سطر جديد.

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

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

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

حاوية سهل الاستخدام عند تحديد جزء من النص بتنسيق خاص (تمييزه بلون أو خط مختلف وما إلى ذلك)

للحاويات قم بتطبيق خصائص CSS التالية:

#perviy( محاذاة عمودية:sub; ) #vtoroy( محاذاة عمودية:3px; ) #tretiy( محاذاة عمودية:-3px; )

سيبدو سطر النص الناتج كما يلي:

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

لقد تشتت انتباهنا قليلاً، والآن نعود إلى مهمتنا الرئيسية.

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

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

كيف يمكننا استخدام هذا؟ ليس لدينا طاولة، بل نعمل باستخدام حاوية div.

ها، اتضح أن الأمر بسيط للغاية.

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

لنفترض أن لدينا فئة div محاذاة النص:

بالنسبة لهذه الكتلة، نحدد خاصية CSS التالية:

محاذاة النص (العرض: خلية الجدول؛)

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

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

هناك العديد من الطرق لتحقيق المحاذاة في حاوية div لجميع المتصفحات:

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

كما تفهم، علينا فقط حل مشكلة المحاذاة الرأسية في IE المرتبطة بسوء فهمها للخاصية العرض: خلية الجدول(لا IE6 ولا IE7 ولا IE8ليس على دراية بهذه الخاصية). لذلك، باستخدام تعليق مشروطسنحدد خصائص CSS مختلفة خصيصًا لمتصفحات IE.

تعليق مشروط

نوع البناء:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

يسمى تعليقًا شرطيًا (كن حذرًا، يجب أن يتوافق نوع التعليق الشرطي تمامًا مع المثال الموضح، حتى مسافة).

لن يتم تنفيذ التعليمات الواردة في هذا التعليق الشرطي إلا إذا كان المتصفح الذي يفسر هذا الرمز ينتمي إلى عائلة IE.

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

حل المشكلة

بسبب كل هذا البقدونس، سنحتاج إلى تزويد كود HTML الخاص بنا بحاويتين إضافيتين. هذا هو الشكل الذي ستبدو عليه كتلة النص الخاصة بنا:

لحاوية فئة div محاذاة النصيتم تعيين خصائص CSS التي تجعل محتواها عموديًا لجميع المتصفحات العادية (باستثناء IE بالطبع):

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

وخاصيتان أخريان تحددان العرض والارتفاع للكتلة:

العرض: 500 بكسل؛ الارتفاع: 500 بكسل؛

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

الآن نبدأ بإضافة الخصائص المتعلقة بالمحاذاة لمتصفحات عائلة IE(لقد استخدمنا لهم كتلًا إضافية شعبةو فترة):

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

قسم محاذاة النص (الموضع: مطلق؛ الأعلى: 50%؛)

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

وفقا لذلك، الأنماط المحددة للكتلة محاذاة النصتم تعديلها:

محاذاة النص (العرض: خلية جدول؛ محاذاة رأسية: وسط؛ العرض: 500 بكسل؛ الارتفاع: 500 بكسل؛ الموضع: نسبي؛)

الآن تم نقل النقطة العلوية اليسرى من كتلة النص إلى الأسفل بنسبة 50%.

ولتوضيح ما يحدث قمت برسم رسم توضيحي:

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

الآن سوف تدخل العلامة حيز التنفيذ فترةوموقعها النسبي:

نطاق محاذاة النص (الموضع: نسبي؛ الأعلى: -50%؛)

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

دعونا نلعب الحيل قليلا

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

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

حل للمشكلة:بحاجة إلى إضافة خاصية إخفاء الفائضحاجز محاذاة النص.

تعرف على العقار بالتفصيل تجاوزممكن في .

تعليمات CSS النهائية للكتلة محاذاة النصلديه النموذج:

محاذاة النص (العرض: خلية جدول؛ محاذاة رأسية: وسط؛ العرض: 500 بكسل؛ الارتفاع: 500 بكسل؛ الموضع: نسبي؛ التجاوز: مخفي؛ الحد: 1 بكسل أسود خالص؛)

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

توسيط في كتلة الارتفاع المتغير

في كثير من الأحيان تكون هناك حاجة لتعيين ارتفاع كتلة الفصل محاذاة النصليس بالبكسل، ولكن كنسبة مئوية من ارتفاع الكتلة الأصلية، وقم بمحاذاة محتويات حاوية div في المنتصف.

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

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

من أجل تنفيذ كتلة متغيرة الارتفاع في مثالنا، سنقوم بتعديل CSS قليلاً:

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

إذن خصائص CSS لكتلة الفصل محاذاة النصسوف تبدو مثل هذا:

محاذاة النص (العرض: جدول؛ العرض: 500 بكسل؛ الارتفاع: 100%؛ الموضع: نسبي؛ التجاوز: مخفي؛ الحد: 1 بكسل أسود خالص؛)

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

نحصل على قائمة إضافية أخرى لخصائص CSS لكتلة div المتداخلة في الحاوية محاذاة النص.

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

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

لمزيد من المعلومات حول المحاذاة الرأسية لكتلة ذات ارتفاع متغير، راجع .

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

نعم، بالنسبة للمحاذاة الرأسية، هناك خاصية محاذاة رأسية خاصة في 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/

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

المحاذاة باستخدام "الامتداد"

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

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

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

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

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

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

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

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

CSS

كونستوتيسيم_فيرست(
الحدود: 2px الصلبة #bf1515؛
الارتفاع: 175 بكسل؛
}
.constutesim_first > ص(
ارتفاع الخط: 175 بكسل؛
الهامش:0;
محاذاة النص:مركز؛
الحشو: 0؛
حجم الخط: 17 بكسل؛
اللون: #3152a0؛
عائلة الخط: تاهوما؛
وزن الخط: غامق؛
}

يمكنك أيضًا أن ترى على الفور كيف سيبدو كل شيء في الواقع.

باستخدام طريقة مماثلة، من الممكن أن ندرك كيفية وضع الصورة، والتي ستكون في المنتصف وبالتأكيد عموديًا. كل ما تبقى هنا هو تحديد خاصية واحدة: Vertical-align: middle; وهو المسؤول عن عرض الصورة.

CSS

الاختلاف الثاني(
الحدود: 2 بكسل أحمر خالص؛
ارتفاع الخط: 158 بكسل؛
}

شعبة التباين الثاني (
محاذاة النص:مركز؛
}
.الصيغة الثانية img (
محاذاة عمودية: وسط؛
الحدود: 0px صلب #3a3838؛
}

نقوم بتنفيذ لقطات مركزية وعمودية للصور.

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

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

CSS

خيار المنافس (
الحدود: 2px الصلبة #d40e0e؛
الارتفاع: 162 بكسل؛
الموقف: نسبي؛
}
.competaird-option div (
الموقف: مطلق؛
أعلى: 50%؛
اليسار: 50%؛
الارتفاع: 28%؛
العرض: 49%;
الهامش: -2% 0 0 -25%؛
الحد: 2 بكسل صلب #4a4848؛
}

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

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

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

تباين تشيرفيرت (
الحدود: 2px الصلبة #c30b0b؛
الارتفاع: 173 بكسل؛
جدول العرض؛
العرض: 100%؛
حجم الخط: 17 بكسل؛
وزن الخط: غامق؛
اللون: #3945a0؛
}

Cherevert-تباين div(
العرض: خلية الجدول؛
محاذاة عمودية: وسط؛
محاذاة النص:مركز؛
}

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

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

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

CSS

المتغير الأفقي (
الحدود: 2px الصلبة #d20c0c؛
الارتفاع: 147 بكسل؛
العرض: فليكس؛
محاذاة العناصر: مركز؛
ضبط المحتوى: مركز؛
حجم الخط: 18 بكسل؛
وزن الخط: غامق؛
اللون: #49518c؛
}

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

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

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

CSS

عمودي-medilpasudsa (
الحد: 2 بكسل صلب #e00a0a؛
الارتفاع: 158 بكسل؛
حجم الخط: 19 بكسل؛
وزن الخط: غامق؛
اللون: #353c71؛
}
.vertical-medilpasudsa > div(
الموقف: نسبي؛
أعلى: 50%؛
تحويل: ترجمة Y(-50%);
محاذاة النص:مركز؛
}

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

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

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

تحتوي محاذاة النص على العديد من الخصائص الصالحة:

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

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

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