جميع طرق المحاذاة العمودية في CSS. المحاذاة العمودية في div. المكافأة: التعليقات المشروطة

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

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

الخيار 1: المسافة البادئة السلبية.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( العرض: 250 بكسل؛ الارتفاع: 250 بكسل؛ الموضع: مطلق؛ أعلى: 50%؛ يسار : 50%؛ الهامش: -125 بكسل 0 0 -125 بكسل؛ img (أقصى عرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛ الهامش: 0 تلقائي؛ الحدود: لا شيء؛))

الخيار 2. المسافة البادئة التلقائية.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( العرض: 250 بكسل؛ الارتفاع: 250 بكسل؛ الموضع: مطلق؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ الهامش: تلقائي؛ الحد الأقصى للعرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛ الهامش: 0 تلقائي؛ الحدود: لا شيء؛ )

الخيار 3. الجدول.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ العرض: الجدول؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ > .inner ( العرض: خلية جدول؛ محاذاة النص: المركز؛ محاذاة رأسية: الوسط؛ ) ) .block ( العرض: كتلة مضمنة؛ img ( العرض: كتلة؛ الحدود: لا شيء؛ ) )

لإضافة تمرير إلى هذا المثال، سيتعين عليك إضافة عنصر آخر إلى التصميم.
مثال: jsfiddle.net/serdidg/fk5nqh52/3.

الخيار 4. العنصر الزائف.

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

الأصل (العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ الفائض: تلقائي؛ المسافة البيضاء: nowrap؛ محاذاة النص: المركز؛ حجم الخط: 0؛ &: قبل ( الارتفاع: 100%؛ العرض: كتلة مضمنة؛ محاذاة رأسية: المحتوى الأوسط: ""؛

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

الأصل (الموضع: ثابت؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ مسافة بيضاء: nowrap؛ محاذاة النص: مركز؛ حجم الخط: 0؛ &: قبل ( الارتفاع: 100% عرض: كتلة مضمنة؛ محاذاة رأسية: المحتوى الأوسط: ""؛

الخيار 5. فليكس بوكس.

واحدة من أبسط الطرق وأكثرها أناقة هي استخدام flexbox. لا يتطلب حركات الجسم غير الضرورية، ويصف بوضوح جوهر ما يحدث، وهو مرن للغاية. الشيء الوحيد الذي يستحق التذكر عند اختيار هذه الطريقة هو دعم IE من الإصدار 10 ضمناً. caniuse.com/#feat=flexbox

الأصل (العرض: 100%؛ الارتفاع: 100%؛ الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ العرض: مرن؛ محاذاة العناصر: المركز؛ محاذاة المحتوى: المركز؛ ضبط المحتوى: المركز؛ تجاوز السعة: تلقائي؛ ) .block ( الخلفية: #60a839; img ( العرض: كتلة; الحدود: لا شيء; ) )

الخيار 6. التحويل.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( الموضع: مطلق؛ أعلى: 50%؛ يسار: 50%؛ تحويل: ترجمة( -50%، -50%؛ img (العرض: كتلة؛ ) )

الخيار 7. زر.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ الفائض: تلقائي؛ الخلفية: لا شيء؛ الحدود: لا شيء؛ المخطط التفصيلي: لا شيء؛ ) .block ( العرض: كتلة مضمنة؛ img (العرض: كتلة؛؛ الحدود: لا شيء؛))

علاوة

باستخدام فكرة الخيار الرابع، يمكنك تعيين هوامش خارجية لـ حاجز، وسيتم عرض الأخير بشكل مناسب محاطًا بأشرطة التمرير.
مثال: jsfiddle.net/serdidg/nfqg9rza/2.

يمكنك أيضًا محاذاة الصورة إلى المنتصف، وإذا كانت الصورة أكبر الأبوين، قم بقياسه إلى الحجم الأبوين.
مثال: jsfiddle.net/serdidg/nfqg9rza/3.
مثال مع صورة كبيرة:

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.

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

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

الطريقة الأولى - العمل المباشر مع HTML

انها في الواقع بسيطة جدا. انظر المثال أدناه.

محاذاة الفقرة إلى المركز.

إذا كنت بحاجة إلى نقل أجزاء النص بطريقة مختلفة، فبدلاً من المعلمة "المركز"، أدخل القيم التالية:

• ضبط - محاذاة النص لعرض الصفحة؛
• الحق - على الحافة اليمنى.
• اليسار - إلى اليسار.

بالقياس، يمكنك نقل المحتوى الموجود في الرؤوس (h1، h2) والحاوية (div).

الطريقة 2 و 3 - استخدام الأنماط

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

كتلة النص.

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

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

الخطوة 1. اكتب في الكود الرئيسي

مادة نصية.

الخطوة 2. في ملف CSS المضمن، أدخل الكود التالي:

روفنو (محاذاة النص:المركز؛)

ألاحظ أن كلمة "rovno" هي مجرد اسم فئة يمكن تسميتها بشكل مختلف. ويترك هذا لتقدير المبرمج.

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

فقط بعض الأسئلة:

• هل تقوم بمشروع معلوماتي غير ربحي؟
• هل تريد أن يحتل موقعك الإلكتروني مرتبة جيدة في محركات البحث؟
• هل تريد كسب الدخل عبر الإنترنت؟

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

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

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

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

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

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

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

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

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

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

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

محاذاة الكتل المتوضعة تمامًا

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

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

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

المحاذاة الأفقية

المحاذاة باستخدام "محاذاة النص: المركز"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الخيار 1: المسافة البادئة السلبية.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( العرض: 250 بكسل؛ الارتفاع: 250 بكسل؛ الموضع: مطلق؛ أعلى: 50%؛ يسار : 50%؛ الهامش: -125 بكسل 0 0 -125 بكسل؛ img (أقصى عرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛ الهامش: 0 تلقائي؛ الحدود: لا شيء؛))

الخيار 2. المسافة البادئة التلقائية.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( العرض: 250 بكسل؛ الارتفاع: 250 بكسل؛ الموضع: مطلق؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ الهامش: تلقائي؛ الحد الأقصى للعرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛ الهامش: 0 تلقائي؛ الحدود: لا شيء؛ )

الخيار 3. الجدول.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ العرض: الجدول؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ > .inner ( العرض: خلية جدول؛ محاذاة النص: المركز؛ محاذاة رأسية: الوسط؛ ) ) .block ( العرض: كتلة مضمنة؛ img ( العرض: كتلة؛ الحدود: لا شيء؛ ) )

لإضافة تمرير إلى هذا المثال، سيتعين عليك إضافة عنصر آخر إلى التصميم.
مثال: jsfiddle.net/serdidg/fk5nqh52/3.

الخيار 4. العنصر الزائف.

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

الأصل (العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ الفائض: تلقائي؛ المسافة البيضاء: nowrap؛ محاذاة النص: المركز؛ حجم الخط: 0؛ &: قبل ( الارتفاع: 100%؛ العرض: كتلة مضمنة؛ محاذاة رأسية: المحتوى الأوسط: ""؛

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

الأصل (الموضع: ثابت؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ مسافة بيضاء: nowrap؛ محاذاة النص: مركز؛ حجم الخط: 0؛ &: قبل ( الارتفاع: 100% عرض: كتلة مضمنة؛ محاذاة رأسية: المحتوى الأوسط: ""؛

الخيار 5. فليكس بوكس.

واحدة من أبسط الطرق وأكثرها أناقة هي استخدام flexbox. لا يتطلب حركات الجسم غير الضرورية، ويصف بوضوح جوهر ما يحدث، وهو مرن للغاية. الشيء الوحيد الذي يستحق التذكر عند اختيار هذه الطريقة هو دعم IE من الإصدار 10 ضمناً. caniuse.com/#feat=flexbox

الأصل (العرض: 100%؛ الارتفاع: 100%؛ الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ العرض: مرن؛ محاذاة العناصر: المركز؛ محاذاة المحتوى: المركز؛ ضبط المحتوى: المركز؛ تجاوز السعة: تلقائي؛ ) .block ( الخلفية: #60a839; img ( العرض: كتلة; الحدود: لا شيء; ) )

الخيار 6. التحويل.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( الموضع: مطلق؛ أعلى: 50%؛ يسار: 50%؛ تحويل: ترجمة( -50%، -50%؛ img (العرض: كتلة؛ ) )

الخيار 7. زر.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ الفائض: تلقائي؛ الخلفية: لا شيء؛ الحدود: لا شيء؛ المخطط التفصيلي: لا شيء؛ ) .block ( العرض: كتلة مضمنة؛ img (العرض: كتلة؛؛ الحدود: لا شيء؛))

علاوة

باستخدام فكرة الخيار الرابع، يمكنك تعيين هوامش خارجية لـ حاجز، وسيتم عرض الأخير بشكل مناسب محاطًا بأشرطة التمرير.
مثال: jsfiddle.net/serdidg/nfqg9rza/2.

يمكنك أيضًا محاذاة الصورة إلى المنتصف، وإذا كانت الصورة أكبر الأبوين، قم بقياسه إلى الحجم الأبوين.
مثال: jsfiddle.net/serdidg/nfqg9rza/3.
مثال مع صورة كبيرة: