مقالة مقدمة من wulin.com (www.vevb.com): كيفية مركز الصور رأسياً.
عرض وارتفاع الصورة غير معروف ، وليس هناك حجم ثابت. بموجب هذا الفرضية ، من المزعج للغاية جعل الصورة مركزية رأسياً في حاوية ذات عرض ثابت وارتفاع. نظرًا لأن المشاريع الحديثة قد تستخدم هذا الحل ، فقد قمت بجمع وفرز بعض الطرق الشائعة الاستخدام.
الرقم التالي هو عرض مثالي. يتم إصلاح عرض وارتفاع الحاوية الخارجية ، وعرض وارتفاع الصورة في الوسط غير معروف ، ولكن يجب أن تكون الصورة دائمًا مركزة رأسياً بالنسبة للحاوية الخارجية.
ومع ذلك ، فإن التأثير المنفذ في الواقع ليس مثاليًا. نظرًا لأن تحليل كل متصفح مختلف ، فسيكون لكل متصفح انحراف 1px-3px.
الطريقة 1 (XHTML 1.0 الانتقالية):
تتمثل هذه الطريقة في تعيين وضع عرض الحاوية الخارجية لعرضه: الجدول ، العلامة الممتدة خارج علامة IMG ، وتعيين وضع العرض على العرض على العرض: خلايا الجدول ، بحيث يمكن محاذاة المحاذاة الرأسية بسهولة مثل عناصر الجدول. بالطبع ، هذا فقط في المتصفحات القياسية ، يحتاج IE6/IE7 أيضًا إلى استخدام المواقع.
جزء HTML الجزء:
<div id = box>
<span> <img src = images/demo.jpg alt => </span>
</div>
جزء نمط CSS:
<نوع النمط = text/css>
#صندوق{
العرض: 500 بكسل ؛ الارتفاع: 400 بكسل ؛
العرض: الجدول ؛
محاذاة النص: المركز ؛
الحدود: 1px الصلبة #d3d3d3 ؛ الخلفية: #fff ؛
}
#box span {
العرض: خلايا الجدول ؛
المحاذاة الرأسية: الأوسط ؛
}
#box img {
الحدود: 1px الصلبة #CCC ؛
}
</style>
<!-[إذا lte ie 7]>
<نوع النمط = text/css>
#صندوق{
الموقف: قريب
الفائض: مخفي.
}
#box span {
الموقف: مطلق ؛
اليسار: 50 ٪ ؛ أعلى: 50 ٪ ؛
}
#box img {
الموقف: قريب
اليسار: -50 ٪ ؛ أعلى: -50 ٪ ؛
}
</style>
<! [endif]->
الطريقة 2 (XHTML 1.0 الانتقالية):
مبادئ وهياكل تنفيذ الطريقة 2 والطريقة 1 متشابهة ، والهياكل هي نفسها. تستخدم الطريقة 1 التعليقات التوضيحية الشرطية ، والطريقة 2 تستخدم CSS Hack.
جزء نمط CSS:
<نوع النمط = text/css>
#صندوق{
العرض: 500 بكسل ؛ الارتفاع: 400 بكسل ؛
الفائض: مخفي.
الموقف: قريب
العرض: خلايا الجدول ؛
محاذاة النص: المركز ؛
المحاذاة الرأسية: الأوسط ؛
الحدود: 1px الصلبة #d3d3d3 ؛ الخلفية: #fff ؛
}
#box span {
الموقف: ثابت.
*الموقف: مطلق ؛ /*اختراق IE6/7*/
أعلى: 50 ٪ ؛ /*اختراق IE6/7*/
}
#box img {
الموقف: ثابت.
*الموقف: قريب ؛ /*اختراق IE6/7*/
أعلى: -50 ٪ ؛ اليسار: -50 ٪ ؛ /* اختراق IE6/7*/
الحدود: 1px الصلبة #CCC ؛
}
</style>
هذه الطريقة لها عيب. في المتصفح القياسي ، نظرًا لأن وضع العرض الخاص بالحاوية الخارجية #Box يتم عرضه: الخلية الجدول ، لا يمكن استخدام سمة الهامش لـ #Box ، كما أن إعداد الحدود في IE8 غير صالح أيضًا.
الطريقة 3 (XHTML 1.0 صارمة):
لا تزال المتصفحات القياسية ضبط وضع العرض الخاص بالحاوية الخارجية #Box على العرض: خلايا الجدول. يستخدم IE6/IE7 طريقة إدخال زوج من العلامات الفارغة أمام علامة IMG.
جزء HTML الجزء:
<div id = box> <i> </i> <img src = images/demo.jpg alt => </viv>
جزء نمط CSS:
<نوع النمط = text/css>
#صندوق{
العرض: 500 بكسل ؛ الارتفاع: 400 بكسل ؛
العرض: خلايا الجدول ؛
محاذاة النص: المركز ؛
المحاذاة الرأسية: الأوسط ؛
الحدود: 1px الصلبة #d3d3d3 ؛ الخلفية: #fff ؛
}
#box img {
الحدود: 1px الصلبة #CCC ؛
}
</style>
<!-[إذا كان ie]>
<نوع النمط = text/css>
#box i {
العرض: كتلة مضمنة.
الارتفاع: 100 ٪
المحاذاة الرأسية: الأوسط
}
#box img {
المحاذاة الرأسية: الأوسط
}
</style>
<! [endif]->
تنطبق الطريقة 3 أيضًا على XHTML 1.0 Transitional. يتم جمع الطرق المذكورة أعلاه من موقع تدريس الويب. في الوقت الحالي ، فقط هذه الطرق الثلاثة راضية تمامًا ، والتوافق جيد ، والقيود صغيرة نسبيًا. لقد اختبرت أيضًا بعض الطرق تلو الأخرى ، لكن النتائج ليست مثالية ، وهناك اختلافات مختلفة تمامًا بين المتصفحات المختلفة. بالإضافة إلى ذلك ، قام Situ Zhengmei بجمع بعض الطرق هنا.
التفكير: تعتمد العديد من الطرق على ضبط وضع العرض للحاوية الخارجية على جدول لتحقيق توسيط رأسي ، أي DIV لمحاكاة الجدول. ما مدى جودة ذلك إذا كان لدى CSS خاصية لتحقيق هذا التأثير. إذا كان لديك طريقة جيدة ، فنحن نرحب بك لمشاركتها.
إبداعي: