عدة طرق لتوسيط div عموديًا

الكاتب：Eve Cole وقت التحديث：2013-03-25 17:35:46

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

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

فعالة، مثل ، و، و، وما إلى ذلك في عناصر الجدول مثل

و لا تحتوي على ميزة المحاذاة، لذلك لا يمكن استخدام المحاذاة العمودية عليها.

تأثير.

البرنامج التعليمي ذو الصلة: طرق N لتوسيط div أفقيًا

1. توسيط عمودي لصف واحد

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

يحب:

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

إجراء.

<الرأس>
قم بتوسيط سطر واحد من النص عموديًا

<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة {
الارتفاع: 25 بكسل؛
ارتفاع الخط: 25 بكسل؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
}

<الجسم>

الآن نريد توسيط هذا النص عموديًا!

2. التوسيط الرأسي لعدة أسطر من النص ذات ارتفاع غير معروف

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

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

بالكامل. يمكنك استخدام شيء مثل

الكود التالي:

شعبة {
الحشو: 25 بكسل؛
}
ميزة هذه الطريقة هي أنه يمكن تشغيلها على أي متصفح والكود بسيط للغاية، ولكن الشرط الأساسي لهذه الطريقة هو أن يكون ارتفاع الحاوية قابلاً للتطوير.

<الرأس>
التوسيط العمودي للنص متعدد الأسطر

<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة {
الحشو: 25 بكسل؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
}

<الجسم>

الآن نريد توسيط هذا النص عموديًا!
 شعبة {
 الحشو: 25 بكسل؛
 الحدود: 1 بكسل الصلبة #FF0099؛
 لون الخلفية:#FFCCFF;
 }

3. توسيط النص متعدد الأسطر بارتفاع ثابت

في بداية هذه المقالة، قلنا أن سمة المحاذاة العمودية في CSS ستعمل فقط على علامات HTML (X) ذات السمات valign، ولكن هناك أيضًا عرض في CSS

يمكن للسمة محاكاة

، لذا يمكننا استخدام هذه السمة لجعل

يحاكي

واستخدام المحاذاة الرأسية. لاحظ أن العرض: الجدول و

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

آخر للنص الذي يجب تحديد موضعه:

شعبة # التفاف {
الارتفاع: 400 بكسل؛
عرض:الجدول؛
}
شعبة # المحتوى {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
}

<الرأس>
التوسيط العمودي للنص متعدد الأسطر

<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة # التفاف {
الارتفاع: 400 بكسل؛
عرض:الجدول؛
}
شعبة # المحتوى {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
}

<الجسم>

الآن نريد توسيط هذا النص عموديًا! Webjx.Com
 شعبة # التفاف {
 الارتفاع: 400 بكسل؛
 عرض:الجدول؛
 }
 شعبة # المحتوى {
 محاذاة عمودية: وسط؛
 العرض: خلية الجدول؛
 الحدود: 1 بكسل الصلبة #FF0099؛
 لون الخلفية:#FFCCFF;
 العرض: 760 بكسل؛
 }

ستكون هذه الطريقة مثالية، ولكن لسوء الحظ، لا يتعرف Internet Explorer 6 على العرض: الجدول والعرض: خلية الجدول بشكل صحيح، لذلك يتم استخدام هذه الطريقة في

إنه غير صالح في Internet Explorer 6 والإصدارات الأقدم. حسنا، هذا محبط! ومع ذلك، لدينا طرق أخرى 4. الحل في Internet Explorer

في Internet Explorer 6 والإصدارات الأقدم، يوجد خطأ في حسابات الارتفاع. بعد وضع العنصر الأصلي في Internet Explorer 6، إذا قمت بعد ذلك بوضع العنصر الفرعي

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

الارتفاع بدلاً من ارتفاع الموضع الموروث من العنصر الأصلي). على سبيل المثال، لدينا مقتطف كود HTML (X) التالي:

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

عندما يتم وضع الصفوف بالنسبة لبعضها البعض، فإن نسبة 100% التي تستخدمها لن تعد هي الارتفاع الأصلي للمحتوى. على سبيل المثال، إذا قمنا بتعيين موضع الغلاف الفرعي على 40%، إذا أردنا إنشاء المحتوى

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

ولكن ماذا لو قمنا أيضًا بتعيين المحتوى على 50%؟ ثم يتم توسيطها عموديًا تمامًا. لذا يمكننا استخدام هذه الطريقة لتحقيق التوسيط الرأسي في Internet Explorer 6:

شعبة # التفاف {
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 400 بكسل؛
الموقف:نسبي؛
}
شعبة # التفاف {
الموقف:مطلق؛
الحدود: 1 بكسل الصلبة #000؛
أعلى:50%;
}
شعبة # المحتوى {
الحدود: 1 بكسل الصلبة #000؛
الموقف:نسبي؛
أعلى:-50%؛
}
بالطبع، لن يعمل هذا الرمز إلا في المتصفحات التي بها مشكلات حاسوبية مثل Internet Exlporer 6. (لكنني لا أفهم. لقد راجعت الكثير من المقالات ولا أعرف إذا كان ذلك بسبب

هل هم متماثلون أم لسبب ما، يبدو أن العديد من الأشخاص غير راغبين في شرح مبدأ هذا الخطأ في Internet Explorer 6. ليس لدي سوى فهم سطحي وأحتاج إلى مزيد من الدراسة)

<الرأس>
التوسيط العمودي للنص متعدد الأسطر

<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة # التفاف {
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 400 بكسل؛
الموقف:نسبي؛
}
شعبة # التفاف {
الموقف:مطلق؛
أعلى:50%;
}
شعبة # المحتوى {
الموقف:نسبي؛
أعلى:-50%؛
}

<الجسم>

الآن نريد توسيط هذا النص عموديًا!
 شعبة # التفاف {
 الحدود: 1 بكسل الصلبة #FF0099؛
 لون الخلفية:#FFCCFF;
 العرض: 760 بكسل؛
 الارتفاع: 500 بكسل؛
 الموقف:نسبي؛
 }
 شعبة # التفاف {
 الموقف:مطلق؛
 الحدود: 1 بكسل الصلبة #000؛
 أعلى:50%;
 }
 شعبة # المحتوى {
 الحدود: 1 بكسل الصلبة #000؛
 الموقف:نسبي؛
 أعلى:-50%؛

5. الحل الأمثل

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

يرجى الرجوع إلى هذه المقالة "اختراق CSS بسيط: التمييز بين IE6 وIE7 وIE8 وFirefox وOpera":

شعبة # التفاف {
عرض:الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 400 بكسل؛
_position:نسبي؛
تجاوز: مخفي؛
}
شعبة # التفاف {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
_الموضع:مطلق؛
_الأعلى:50%;
}
شعبة # المحتوى {
_ الموقف: نسبي؛
_الأعلى:-50%;
}
عند هذه النقطة، يتم إنشاء حل توسيط مثالي.

<الرأس>
التوسيط العمودي للنص متعدد الأسطر

<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة # التفاف {
عرض:الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 400 بكسل؛
_position:نسبي؛
تجاوز: مخفي؛
}
شعبة # التفاف {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
_الموضع:مطلق؛
_الأعلى:50%;
}
شعبة # المحتوى {
_position:نسبي؛
_الأعلى:-50%;
}

<الجسم>

الآن نريد توسيط هذا النص عموديًا!
 شعبة # التفاف {
 الحدود: 1 بكسل الصلبة #FF0099؛
 لون الخلفية:#FFCCFF;
 العرض: 760 بكسل؛
 الارتفاع: 500 بكسل؛
 الموقف:نسبي؛
 }
 شعبة # التفاف {
 الموقف:مطلق؛
 الحدود: 1 بكسل الصلبة #000؛
 أعلى:50%;
 }
 شعبة # المحتوى {
 الحدود: 1 بكسل الصلبة #000؛
 الموقف:نسبي؛
 أعلى: -50%؛

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