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

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

المحاذاة الأفقية باستخدام محاذاة النص

في بعض الأحيان يكون الحل الأبسط هو الأفضل:

Div.center ( محاذاة النص: المركز؛ الخلفية: hsl(0, 100%, 97%); ) div.center img ( العرض: 33%; الارتفاع: تلقائي; )

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

توسيط مع الهامش: تلقائي

حل آخر للمحاذاة الأفقية:

Div.center ( الخلفية: hsl(60, 100%, 97%); ) div.center img ( العرض: كتلة; العرض: 33%; الارتفاع: تلقائي; الهامش: 0 تلقائي;)

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

توسيط باستخدام خلية الجدول

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

محاذاة للوسط ( العرض: جدول؛ الخلفية: hsl(120, 100%, 97%)); العرض: 100%; ) .center-core ( العرض: خلية جدول؛ محاذاة النص: المركز؛ محاذاة رأسية: وسط؛ ) .center-core img (العرض: 33%؛ الارتفاع: تلقائي؛)

لكي يعمل كل شيء بشكل صحيح، يجب ضبط div على width: 100%. لتوسيط العنصر عموديًا، سنستخدم تقنيات قياسية عن طريق ضبط الارتفاع. يعمل في كل مكان، بما في ذلك IE8+.

المحاذاة المطلقة

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

محاذاة مطلقة ( الموضع: نسبي؛ الحد الأدنى للارتفاع: 500 بكسل؛ الخلفية: hsl(200, 100%, 97%); ) .img محاذاة مطلقة ( العرض: 50%; الحد الأدنى للعرض: 200 بكسل; الارتفاع: تلقائي؛ تجاوز السعة : تلقائي؛ الهامش: تلقائي؛ الموضع: الأعلى: 0؛

مركز باستخدام الترجمة

حل جديد يستخدم تحويلات CSS. يوفر كلا من المحاذاة الأفقية والرأسية:

المركز ( الخلفية: hsl(180, 100%, 97%)); الموضع: نسبي; الحد الأدنى للارتفاع: 500 بكسل; ) .center img ( الموضع: مطلق; الأعلى: 50%; اليسار: 50%; التحويل: ترجمة(-50) %، -50%)؛ العرض: 30% الارتفاع: تلقائي)

هناك عدة عيوب:

• تتطلب خاصية تحويل CSS بادئات المتصفح
• لا يعمل في الإصدارات الأقدم من IE (8 وما دونه)
• يجب إعطاء الحاوية الخارجية ارتفاعًا.
• إذا كان هناك نص داخل الحاوية، فقد يكون ضبابيًا بعض الشيء.

توسيط باستخدام نوع العرض المرن

ربما الخيار الأبسط.

المركز ( الخلفية: hsl(240, 100%, 97%)); العرض: flex; ضبط المحتوى: center; محاذاة العناصر: center; ) .center img ( width: 30%; height: auto; )

لا يعمل في جميع إصدارات IE (على الرغم من أنه يمكنك حماية نفسك باستخدام العرض: table-cell بالإضافة إلى ذلك). CSS الكامل:

المركز ( الخلفية: hsl(240, 100%, 97%)); العرض: -webkit-box; /* Safari، iOS 6 والإصدارات الأقدم؛ Android، WebKit الأقدم */ العرض: -moz-box; /* Firefox (can و buggy) */display: -ms-flexbox; -align: center; -moz-box-align: center; -webkit-align-items: center; -box-pack: center; -ms-flex-pack: center; -ضبط المحتوى: مركز؛

توسيط باستخدام الحساب

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

المركز ( الخلفية: hsl(300, 100%, 97%)); الحد الأدنى للارتفاع: 600 بكسل; الموضع: نسبي; ) .center img ( العرض: 40%; الارتفاع: تلقائي; الموضع: مطلق; الأعلى:calc(50% - 20%؛ اليسار: احسب (50% - 20%)؛

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

الأعلى: الكالسيوم(50% - (40% / 2)); اليسار: calc(50% - (40% / 2));

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

مركز الصورة ( العرض: 500 بكسل; الارتفاع: 500 بكسل; الموضع: مطلق; الأعلى:calc(50% - (300px / 2)); اليسار: calc(50% - (300px - 2)); )

هذه الطريقة مدعومة في متصفح Firefox، بدءًا من الإصدار 4، ستحتاج إلى تسجيل بادئات المتصفح. لا يعمل في آي إي 8. الكود الكامل:

الصورة المركزية ( العرض: 40%؛ الارتفاع: تلقائي؛ الموضع: مطلق؛ الأعلى: -webkit-calc(50% - 20%))؛ اليسار: -webkit-calc(50% - 20%))؛ الأعلى: -moz-calc (50% - 20%)؛ اليسار: -moz-calc(50% - 20%)؛ الأعلى: calc(50% - 20%))؛

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

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

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

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

العنصر ( الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛ العرض: 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 تلقائي؛ أفقي فقط */ /* الهامش: عمودي فقط */ ) لوريم إيبسوم دولور سيت أميت

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

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

فلاد ميرزيفيتش

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

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

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

مثال 1: توسيط الرسم

جدول المحاذاة (العرض: 100%; /* عرض الجدول */ الارتفاع: 100%; /* ارتفاع الجدول */ )

في هذا المثال، يتم تعيين المحاذاة الأفقية باستخدام معلمة العلامة align="center". ، ولا يجوز توسيط محتويات الخلية عموديًا، لأن هذا هو الموضع الافتراضي.

لتعيين ارتفاع الجدول على 100%، يجب عليك إزالة الرمز، ولن يكون الرمز صالحًا بعد الآن.

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

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

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

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

محاذاة أعلى

لتحديد المحاذاة العليا لمحتويات الخلية، لعلامة تحتاج إلى تعيين سمة valign بالقيمة الأعلى (المثال 2).

مثال 2: استخدام فالين

تنسيق

العمود 1

العمود 2

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

مثال 3: تطبيق الأنماط للمحاذاة

جدول المحاذاة (العرض: 100%; /* عرض الجدول */ ) #col1 ( العرض: 75%; /* عرض العمود الأول */ الخلفية: #f0f0f0; /* لون خلفية العمود الأول */ ) #col2 ( العرض: 25 % /* عرض العمود الثاني */ الخلفية: #fc5 /* لون خلفية العمود الثاني */ محاذاة النص: لليمين /* المحاذاة لليمين */ ) #col1, #col2 ( محاذاة عمودية: أعلى ; / * المحاذاة العلوية */ الحشو: 5 بكسل /* الهوامش حول محتويات الخلية */ ) ;

العمود 1

العمود 2

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

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

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

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

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

المثال 4: محاذاة الصيغة

تنسيق

(18.6)

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

محاذاة عناصر النموذج

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

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

المثال 5: محاذاة حقول النموذج

تنسيق

اسم
بريد إلكتروني
تعليق

في هذا المثال، بالنسبة لتلك الخلايا التي تتطلب المحاذاة إلى اليمين، تتم إضافة سمة align="right". للتأكد من وضع علامة التعليق أعلى النص متعدد الأسطر، يتم تعيين الخلية المقابلة على محاذاة لأعلى باستخدام السمة valign.

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. هناك العديد من الطرق ولا تعمل جميعها في جميع المتصفحات. دعونا نلقي نظرة على 5 طرق مختلفة وإيجابيات وسلبيات كل منها. مثال.

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

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

بعض المعلومات المفيدة التي ينبغي أن تكون في موقع مركزي. #التفاف (العرض: الجدول؛) #الخلية (العرض: خلية الجدول؛ المحاذاة العمودية: الوسط؛)

الايجابيات

• يمكن للمحتوى تغيير الارتفاع ديناميكيًا (الارتفاع غير محدد في CSS).
• لا يتم قطع المحتوى إذا لم تكن هناك مساحة كافية له.

السلبيات

• لا يعمل في IE 7 أو أقل
• الكثير من العلامات المتداخلة

الطريقة الثانية

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

بما أن الارتفاع ثابت، يمكنك ضبط overflow:auto; بالنسبة لقسم يحتوي على محتوى، وبالتالي، إذا لم يكن المحتوى مناسبًا، فستظهر أشرطة التمرير.

المحتوى هنا #content ( الموضع: مطلق؛ الأعلى: 50%؛ الارتفاع: 240 بكسل؛ الهامش العلوي: -120 بكسل؛ /* ناقص نصف الارتفاع */ )

الايجابيات

• يعمل في جميع المتصفحات.
• لا يوجد تداخل غير ضروري.

السلبيات

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

الطريقة الثالثة

في هذه الطريقة، سنقوم بتغليف محتوى div بـ div آخر. فلنضبط ارتفاعه على 50% (الارتفاع: 50%؛)، والهامش السفلي على نصف الارتفاع (margin-bottom:-contentheight;). سيتم مسح المحتوى العائم ويتم توسيطه.

هنا هو المحتوى #floater( float: left; height: 50%; Margin-bottom: -120px; ) #content( واضح: كلاهما; الارتفاع: 240px; الموضع: نسبي; )

الايجابيات

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

السلبيات

• لا أستطيع إلا أن أفكر في شيء واحد: أنه يتم استخدام عنصر فارغ إضافي.

الطريقة الرابعة.

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

معلومات مهمة. #content( الموضع: مطلق؛ أعلى: 0؛ أسفل: 0؛ يسار: 0؛ يمين: 0؛ الهامش: تلقائي؛ الارتفاع: 240 بكسل؛ العرض: 70%؛ )

الايجابيات

• بسيط جدا.

السلبيات

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

الطريقة الخامسة

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

بعض سطر النص #content( height: 100px; line-height: 100px; )

الايجابيات

• يعمل في جميع المتصفحات.
• لا يقطع النص إذا لم يكن مناسبًا.

السلبيات

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

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

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

الخطوة 1

من الجيد دائمًا أن تبدأ بالترميز الدلالي. سيتم تنظيم صفحتنا على النحو التالي:

• #floater (لتوسيط المحتوى)
• #center (العنصر المركزي)
  • #جانب
    • #شعار
    • # التنقل (قائمة
    • #محتوى
  • #bottom (لحقوق النشر وكل ذلك)

  لنكتب علامة html التالية:

  شركة مركزية شركة

  • بيت
  • منتجات
  • مدونة
  • اتصال
  • عن
  عنوان الصفحة

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

  العنوان 2

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

  إشعار حقوق النشر يذهب هنا

  الخطوة 2

  الآن سوف نكتب أبسط CSS لوضع العناصر على الصفحة. يجب عليك حفظ هذا الكود في ملف style.css. ولهذا يتم كتابة الرابط في ملف html.

  Html، النص (الهامش: 0؛ الحشو: 0؛ الارتفاع: 100%؛) النص (الخلفية: url("page_bg.jpg") 50% 50% بدون تكرار #FC3؛ عائلة الخط: Georgia، Times، serifs؛ ) #floater ( الموضع: نسبي؛ تعويم: يسار؛ الارتفاع: 50%؛ الهامش السفلي: -200 بكسل؛ العرض: 1 بكسل؛ ) #centered ( الموضع: نسبي؛ واضح: يسار؛ الارتفاع: 400 بكسل؛ العرض: 80%؛ الحد الأقصى -العرض: 800 بكسل؛ الحد الأدنى للعرض: 400 بكسل؛ الهامش: 0 تلقائي؛ الحد: 4 بكسل صلب #666) #bottom (الموضع: مطلق؛ الأسفل: 0؛ اليمين: 0؛) #nav (الموضع: مطلق؛ اليسار: 0) ؛ أسفل: 0؛ الحشو: 20 بكسل؛ #content (الموضع: مطلق؛ اليسار: 0؛ أعلى: 0؛ أسفل: 0؛ تجاوز السعة: تلقائي؛ الحشو: 20 بكسل؛

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

  الهامش السفلي للعنصر "العائم" يساوي ناقص نصف ارتفاع المحتوى (400 بكسل)، أي -200 بكسل؛

  يجب أن تبدو صفحتك الآن كما يلي:

  

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

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

  الخطوه 3

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

  #nav ul (نمط القائمة: لا شيء؛ الحشو: 0؛ الهامش: 20px 0 0 0؛ المسافة البادئة للنص: 0؛) #nav li (الحشو: 0؛ الهامش: 3px؛) #nav li a (العرض: كتلة؛ لون الخلفية: #e8e8e8؛ الهامش: 0؛ الحد السفلي: 1 بكسل صلب: يمين؛ المحتوى: ""؛ وزن الخط: عريض؛ تعويم: يمين؛ الهامش: 0 2 بكسل 0 5 بكسل؛ f8f8f8؛ لون الحد السفلي : #777; ) #nav li a:hover::after ( الهامش: 0 0 0 7px; اللون: #f93; ) #nav li a:active ( الحشو: 8px 7px 7px; )

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

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

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

  

  الخطوة 4

  وأخيرًا وليس آخرًا، سنضيف بعض البراغي لتصميمنا لمزيد من الجمال.

  #centered (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;) h1, h2, h3, h4, h5, h6 ( عائلة الخط: Helvetica, Arial, sans- serif; الحشو العلوي: 0؛ ) #الجزء السفلي (الحشو: 10 بكسل؛ حجم الخط: 0.7em؛ اللون: #f03؛) #logo (حجم الخط: 2em؛ محاذاة النص: المركز؛ اللون: #999؛) #logo قوي ( وزن الخط: عادي؛ ) # امتداد الشعار ( العرض: كتلة؛ حجم الخط: 4em؛ ارتفاع الخط: 0.7em؛ اللون: #666؛ ) p، h2، h3 ( ارتفاع الخط: 1.6em؛ ) أ (اللون: #f03;)

  في هذه الأنماط قمنا بتعيين زوايا مستديرة للعنصر #centered. في CSS3، سيتم ذلك عن طريق خاصية border-radius. لم يتم تنفيذ هذا بعد في بعض المتصفحات، بخلاف استخدام البادئات -moz و -webkit لموزيلا فايرفوكس وSafari/Webkit.

  

  التوافق

  كما خمنت على الأرجح، المصدر الرئيسي لمشاكل التوافق هو Internet Explorer:

  • يجب أن يكون للعنصر #floater مجموعة عرض
  • يحتوي IE 6 على حشوة إضافية حول القوائم

  237152 مشاهدة