عند الحديث عن هذه المشكلة، قد يتساءل بعض الأشخاص، أليس هناك سمة محاذاة رأسية في CSS لتعيين التوسيط العمودي؟ حتى لو كانت بعض المتصفحات لا تدعم ذلك، فأنا بحاجة فقط إلى إجراء القليل من CSS
تكنولوجيا الاختراق كافية! لذلك يجب أن أقول بضع كلمات هنا، هناك بالفعل سمة محاذاة رأسية في CSS، ولكنها تحدث فقط للعناصر التي تحتوي على سمة valign في عنصر HTML (X).
فعالة، مثل <td>، و<th>، و<caption>، وما إلى ذلك في عناصر الجدول مثل <div> و<span> لا تحتوي على ميزة المحاذاة، لذا لا يمكن استخدام المحاذاة العمودية عليها.
تأثير.
البرنامج التعليمي ذو الصلة: طرق N لتوسيط div أفقيًا
1. توسيط عمودي صف واحد
إذا كان هناك سطر واحد فقط من النص في الحاوية، فمن السهل نسبيًا توسيطه، نحتاج فقط إلى ضبط ارتفاعه الفعلي ليكون مساويًا لارتفاع ارتفاع السطر.
يحب:
شعبة {
الارتفاع: 25 بكسل؛
ارتفاع الخط: 25 بكسل؛
تجاوز: مخفي؛
}
هذا الرمز بسيط للغاية. يتم استخدام إعداد التجاوز: المخفي لاحقًا لمنع المحتوى من تجاوز الحاوية أو التسبب في التفاف الخط تلقائيًا، بحيث لا يمكن تحقيق تأثير التوسيط العمودي. المزيد من تعليم CSS
إجراء.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<title> قم بتوسيط سطر واحد من النص عموديًا</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة {
الارتفاع: 25 بكسل؛
ارتفاع الخط: 25 بكسل؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
}
</نمط>
</الرأس>
<الجسم>
<div>الآن نريد توسيط هذا النص عموديًا! </div>
</الجسم>
</html>
2. التوسيط الرأسي لعدة أسطر من النص ذات ارتفاع غير معروف
إذا كان ارتفاع قطعة المحتوى متغيرًا، فيمكننا استخدام الطريقة الأخيرة المستخدمة لتحقيق التوسيط الأفقي المذكورة في القسم السابق، وهي ضبط الحشو بحيث يكون الجزء العلوي والسفلي
يمكن أن تكون قيم الحشو هي نفسها. مرة أخرى، هذه طريقة "نظرة" للتوسيط العمودي، إنها مجرد طريقة لجعل النص يملأ <div> بالكامل. يمكنك استخدام شيء مثل
الكود التالي:
شعبة {
الحشو: 25 بكسل؛
}
وميزة هذه الطريقة هي أنه يمكن تشغيلها على أي متصفح، والكود بسيط للغاية، ولكن الشرط الأساسي لتطبيق هذه الطريقة هو أن يكون ارتفاع الحاوية قابلاً للتطوير.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<title> التوسيط العمودي للنص متعدد الأسطر</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة {
الحشو: 25 بكسل؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
}
</نمط>
</الرأس>
<الجسم>
<div><pre>الآن نريد توسيط هذا النص عموديًا!
شعبة {
الحشو: 25 بكسل؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
}
</pre></div>
</الجسم>
</html>
3. توسيط النص متعدد الأسطر بارتفاع ثابت
في بداية هذه المقالة، قلنا أن سمة المحاذاة العمودية في CSS ستعمل فقط على علامات HTML (X) ذات السمات valign، ولكن هناك أيضًا عرض في CSS
يمكن للسمة محاكاة <table>، لذا يمكننا استخدام هذه السمة لجعل <div> يحاكي <table> واستخدام المحاذاة الرأسية. لاحظ أن العرض: الجدول و
كيفية استخدام عرض: خلية الجدول، يجب تعيين الأول على العنصر الأصلي، والأخير يجب تعيينه على العنصر الفرعي، لذلك نحتاج إلى إضافة عنصر <div> آخر للنص الذي يجب تحديد موضعه:
شعبة # التفاف {
الارتفاع: 400 بكسل؛
عرض:الجدول؛
}
شعبة # المحتوى {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<title> التوسيط العمودي للنص متعدد الأسطر</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة # التفاف {
الارتفاع: 400 بكسل؛
عرض:الجدول؛
}
شعبة # المحتوى {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
}
</نمط>
</الرأس>
<الجسم>
<div معرف = "التفاف">
<div id="content"><pre>الآن نريد توسيط هذا النص عموديًا! Webjx.Com
شعبة # التفاف {
الارتفاع: 400 بكسل؛
عرض:الجدول؛
}
شعبة # المحتوى {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
}
</pre></div>
</div>
</الجسم>
</html>
ستكون هذه الطريقة مثالية، ولكن لسوء الحظ، لا يتعرف Internet Explorer 6 على العرض: الجدول والعرض: خلية الجدول بشكل صحيح، لذلك يتم استخدام هذه الطريقة في
إنه غير صالح في Internet Explorer 6 والإصدارات الأقدم. حسنا، هذا محبط! ومع ذلك، لدينا طرق أخرى 4. الحل في Internet Explorer
في Internet Explorer 6 والإصدارات الأقدم، يوجد خطأ في حسابات الارتفاع. بعد وضع العنصر الأصلي في Internet Explorer 6، إذا قمت بعد ذلك بوضع العنصر الفرعي
عند إجراء حسابات النسبة المئوية، يبدو أن أساس الحساب موروث (إذا كانت القيمة الموضوعة قيمة مطلقة، فلا توجد مشكلة، ولكن أساس الحساب باستخدام النسبة المئوية لن يعد هو أساس العنصر)
height، بينما يتم توريث ارتفاع الموضع من العنصر الأصلي). على سبيل المثال، لدينا مقتطف كود HTML (X) التالي:
<div معرف = "التفاف">
<div معرف = "subwrap">
<div معرف = "المحتوى">
</div>
</div>
</div>
إذا قمنا بتحديد موضع مطلق على الغلاف الفرعي، فسيرث المحتوى أيضًا هذه السمة، على الرغم من أنه لن يتم عرضه على الفور على الصفحة، إذا تم تحديد موضع المحتوى بشكل أكبر
عندما يتم وضع الصفوف بالنسبة لبعضها البعض، فإن نسبة 100% التي تستخدمها لن تعد هي الارتفاع الأصلي للمحتوى. على سبيل المثال، إذا قمنا بتعيين موضع الالتفاف الفرعي على 40%، إذا أردنا إنشاء المحتوى
إذا تداخلت الحافة مع الغلاف، فيجب ضبط الجزء العلوي:-80%، وإذا قمنا بتعيين الجزء العلوي للغلاف الفرعي:50%، فيجب علينا استخدام 100% لإعادة المحتوى إلى موضعه الأصلي.
ولكن ماذا لو قمنا أيضًا بتعيين المحتوى على 50%؟ ثم يتم توسيطها عموديًا تمامًا. لذا يمكننا استخدام هذه الطريقة لتحقيق التوسيط العمودي في Internet Explorer 6:
شعبة # التفاف {
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 400 بكسل؛
الموقف:نسبي؛
}
شعبة # التفاف {
الموقف:مطلق؛
الحدود: 1 بكسل الصلبة #000؛
أعلى:50%;
}
شعبة # المحتوى {
الحدود: 1 بكسل الصلبة #000؛
الموقف:نسبي؛
أعلى: -50%؛
}
وبطبيعة الحال، لن يعمل هذا الرمز إلا في المتصفحات التي بها مشكلات حاسوبية مثل Internet Exlorer 6. (لكنني لا أفهم. لقد راجعت الكثير من المقالات ولا أعرف إذا كان ذلك بسبب
هل هم متماثلون أم لسبب ما، يبدو أن العديد من الأشخاص غير راغبين في شرح مبدأ هذا الخطأ في Internet Explorer 6. ليس لدي سوى فهم سطحي وأحتاج إلى مزيد من الدراسة)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<title> التوسيط العمودي للنص متعدد الأسطر</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة # التفاف {
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 400 بكسل؛
الموقف:نسبي؛
}
شعبة # التفاف {
الموقف:مطلق؛
أعلى:50%;
}
شعبة # المحتوى {
الموقف:نسبي؛
أعلى: -50%؛
}
</نمط>
</الرأس>
<الجسم>
<div معرف = "التفاف">
<div معرف = "subwrap">
<div id="content"><pre>الآن نريد توسيط هذا النص عموديًا!
شعبة # التفاف {
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 500 بكسل؛
الموقف:نسبي؛
}
شعبة # التفاف {
الموقف:مطلق؛
الحدود: 1 بكسل الصلبة #000؛
أعلى:50%;
}
شعبة # المحتوى {
الحدود: 1 بكسل الصلبة #000؛
الموقف:نسبي؛
أعلى: -50%؛
</pre>
</div>
</div>
</div>
</الجسم>
</html>
5. الحل الأمثل
ومن ثم يمكننا الحصول على حل مثالي من خلال الجمع بين الطريقتين المذكورتين أعلاه، ولكن هذا يتطلب معرفة اختراق CSS. لاستخدام CSS Hack للتمييز بين المتصفحات، يمكنك ذلك
يرجى الرجوع إلى "اختراق CSS البسيط: التمييز بين IE6 وIE7 وIE8 وFirefox وOpera":
شعبة # التفاف {
عرض:الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 400 بكسل؛
_ الموقف: نسبي؛
تجاوز: مخفي؛
}
شعبة # التفاف {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
_الموضع:مطلق؛
_الأعلى:50%;
}
شعبة # المحتوى {
_ الموقف: نسبي؛
_الأعلى:-50%;
}
عند هذه النقطة، يتم إنشاء حل توسيط مثالي.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<title> التوسيط العمودي للنص متعدد الأسطر</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<نمط النوع = "نص/CSS">
الجسم {حجم الخط: 12px؛ عائلة الخط: تاهوما؛}
شعبة # التفاف {
عرض:الجدول؛
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 400 بكسل؛
_ الموقف: نسبي؛
تجاوز: مخفي؛
}
شعبة # التفاف {
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
_الموضع:مطلق؛
_الأعلى:50%;
}
شعبة # المحتوى {
_ الموقف: نسبي؛
_الأعلى:-50%;
}
</نمط>
</الرأس>
<الجسم>
<div معرف = "التفاف">
<div معرف = "subwrap">
<div id="content"><pre>الآن نريد توسيط هذا النص عموديًا!
شعبة # التفاف {
الحدود: 1 بكسل الصلبة #FF0099؛
لون الخلفية:#FFCCFF;
العرض: 760 بكسل؛
الارتفاع: 500 بكسل؛
الموقف:نسبي؛
}
شعبة # التفاف {
الموقف:مطلق؛
الحدود: 1 بكسل الصلبة #000؛
أعلى:50%;
}
شعبة # المحتوى {
الحدود: 1 بكسل الصلبة #000؛
الموقف:نسبي؛
أعلى: -50%؛
</pre>
</div>
</div>
</div>
</الجسم>
</html>
ملاحظة: قيمة المحاذاة العمودية للتوسيط العمودي هي المنتصف، بينما قيمة المحاذاة الأفقية للتوسيط هي المنتصف، على الرغم من أن كلاهما متمركزان، إلا أن الكلمات الأساسية مختلفة.