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

1. المحاذاة الأفقية لمركز الكتلة/الصفحة 1.1. إذا كان للكتلة عرض: div ( width: 300px; Margin: 0 auto; /*توسيط العنصر أفقيًا داخل الكتلة الأصلية*/ )

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

1.2. إذا كانت الكتلة متداخلة داخل كتلة أخرى وليس لها/عرض محدد: .wrapper (محاذاة النص: المركز؛) 1.3. إذا تم تعيين عرض الكتلة وتحتاج إلى إصلاحه في وسط الكتلة الأصلية: .wrapper (الموضع: نسبي؛ /* قم بتعيين الموضع النسبي للكتلة الأصلية حتى نتمكن من وضع الكتلة داخلها بشكل مطلق * /) .box ( العرض: 400 بكسل; الموضع: مطلق ; اليسار: 50%; الهامش الأيسر: -200 بكسل; /*إزاحة الكتلة إلى اليسار بمسافة تساوي نصف عرضها*/ ) 1.4. إذا لم يكن للكتل عرض محدد، فيمكنك توسيطها باستخدام كتلة مجمّع أصل: .wrapper (text-align: center; /*توسيط محتويات الكتلة*/) .box (display: inline-block; / *ترتيب الكتل في صف أفقيًا*/ الهامش الأيمن: -0.25em; /*إزالة الهامش الأيمن بين الكتل*/ ) 2. المحاذاة العمودية 2.1. إذا كان النص يشغل سطرًا واحدًا، على سبيل المثال، للأزرار وعناصر القائمة: .button ( height: 50px; line-height: 50px; ) 2.2. لمحاذاة كتلة عموديًا داخل الكتلة الأصلية: .wrapper (الموضع: نسبي؛) .box ( الارتفاع: 100 بكسل؛ الموضع: مطلق؛ الأعلى: 50%؛ الهامش: -50px 0 0 0; ) 2.3. المحاذاة العمودية حسب نوع الجدول: .wrapper ( العرض: جدول؛ العرض: 100%؛ ) .box ( العرض: خلية جدول؛ الارتفاع: 100 بكسل؛ محاذاة النص: المركز؛ محاذاة رأسية: وسط؛ ) 2.4. إذا كان للمربع عرض وارتفاع ويحتاج إلى توسيطه في المربع الأصلي: .wrapper ( الموضع: نسبي؛ ) .box ( الارتفاع: 100 بكسل; العرض: 100 بكسل; الموضع: مطلق; أعلى: 0; يمين: 0; أسفل : 0؛ اليسار: 0؛ الهامش: تلقائي؛ /*حتى لا ينتشر المحتوى*/ ) 2.5. تحديد الموضع المطلق في وسط الصفحة/الكتلة باستخدام تحويل CSS3:

إذا تم تحديد الأبعاد للعنصر

div (العرض: 300 بكسل; /*ضبط عرض الكتلة*/ الارتفاع:100px; /*ضبط ارتفاع الكتلة*/ تحويل: ترجمة(-50%, -50%); الموضع: مطلق; الأعلى: 50 %; اليسار: 50% ;

إذا كان العنصر ليس له أبعاد وليس فارغا

بعض النص هنا h1 ( الهامش: 0؛ التحويل: ترجمة (-50%، -50%)؛ الموضع: مطلق؛ الأعلى: 50%؛ اليسار: 50%؛)

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

نعم، بالنسبة للمحاذاة الرأسية، هناك خاصية محاذاة رأسية خاصة في 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 على حشوة إضافية حول القوائم

  237154 مشاهدة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • بيت
  • عن المؤلف
  ارتفاع خط المحاذاة العمودية

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

  

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

  
  CSS

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

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

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

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

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

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

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

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

  
  
  
  حصة هذه المادة:
  مقالات مماثلة

  
  17 أبريل 2015
  أفضل منصة لأجهزة هواتف Fly الذكية: المعالج والذاكرة والأداء
  
  17 أبريل 2015
  مصباح الملح "زهرة الحجر"
  
  17 أبريل 2015
  طرق مثمرة لقضاء الوقت على الإنترنت
  
  17 أبريل 2015
  كيفية تثبيت تطبيق سوق بلاي على جهاز كمبيوتر محمول