قبل كان لدينا للتعامل مع CSS لإنشاء تخطيطات الصفحات لدينا والتوفيق بين بعض المحتويات داخل خلية جدول بدا لعب الأطفال فقط ل. ببساطة تحديد "محاذاة" أو "valign" الملكية من الجدول لدينا في محاذاة اختيارك، قطعة من الكعكة!
مع تخطيطات المغلق، رغم ان لدينا "محاذاة عمودية" الملكية للعناصر، لا يبدو أن تكون بسيطة مثل "محاذاة" أو "valign" الخصائص. على أن تكون أكثر specifiic في "عمودي محاذاة" لا يبدو أن حل أي من المشاكل الخاصة بك، وخاصة إذا كتابة قطعة من عبر متصفح المغلق.
من دون استخدام جداول HTML، ومشكلة تركز على الكائن، سواء كان صورة أو بعض النص ضمن تقسيم المحتوية، ربما كان كل كابوس مطوري UI / المغلق في بعض نقطة. هذه المشكلة يستنبط المزيد من التوفيق بين همومك، إذا كان الكائن إلى أن تتركز الحيوية في الطبيعة، أي عندما ارتفاعه هو متغير (الارتفاع غير معروف).
على الرغم من أنه لا يوجد حل معروف على التوالي إلى الأمام من شأنها أن تعمل عبر مجموعة من المتصفحات علينا أن نتعامل مع، الحل الذي حاولت أن تصل إلى ما يبدو للعمل في برامج التصفح القليلة التي حاولت في (IE6، IE 7 ، وما يليها).
الحل:
في مثل متصفحات موزيلا، أوبرا وسفاري، وغريب التصرف "محاذاة عمودية" لا يمكن أن تتحقق الملكية إلى رشدها، وذلك ببساطة عن طريق تعيين "عرض" ملك للتقسيم تحتوي على "خلية الجدول" (العرض: جدول خلية) .
المشكلة لا تزال مع عائلة اي من المتصفحات، ومنظمة الصحة العالمية، حتى الآن لا يبدو أن نفهم ما لمع الخاصية "جدول الخلية"، والجاهل كما هي، وأنها تجاهله. الحل الواردة أدناه، على الرغم من البساطة، وإعلانات بعض العناصر أكثر DOM إلى HTML الخاص بك لجعل الامور تحدث.
وCSS و HTML يشبه هذا
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> المشاهدات: 3456 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:
النتيجة يبدو مثل هذا: -
عرض تجريبي هنا | ملفات المصدر تحميل (التحميل 448 مرة)
فهم الحل: لذلك فهم المتصفحات العرض: الجدول والعرض: الجدول الخلايا الخصائص، فإنه نادرا ما يحتاج إلى أي تفسير. لشركة آي إي، مع استخدام 1 الإختراق IE محددة (المأجور التجزئة)، ونحن على الاطلاق وضع الحاوية الكائن (obj_container) في نصف ارتفاع المتاحة. ثم الكائن (الكائنات) في غضون هو موقف نسبيا ويتم نقل ما يصل إلى النصف من ذروتها ... حسنا! ويبدو لي أن فهم نظرة على وجهك، لكنه يعمل. حاول ذلك! يتم الجمع بين التقنيات المذكورة أعلاه أن يقدم لنا ما سبق حل عبر متصفح.
ويمكن تعديلها بسهولة المغلق على النحو التالي لتحقيق، عمودي محاذاة: أعلى أو عمودي محاذاة: أسفل TOP محاذاة CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}
HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> وجهات النظر: 1234 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:
النتيجة يبدو مثل هذا: -
محاذاة إلى الأسفل CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> وجهات النظر: 1234 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:
النتيجة يبدو مثل هذا: -
عرض تجريبي هنا | حمل هنا
تركز الأفقي للكائن يتحقق ببساطة مع الخاصية الهامش، من خلال تحديد هامش اليسار والهامش الأيمن لصناعة السيارات يبدو أن العصور، منذ كنت في محاولة لايجاد حل معقول لهذه المشكلة المحاذاة. ولكن الآن مع هذا الحل، أشعر أنني في سلام القليل.
مع الأمل في أن يوما ما
- وسوف عمودي الانحياز الملكية في CSS العمل كما يفعل داخل خلية جدول، دون الحاجة للتغلب على الكثير من اللف والدوران
- على الأقل، وتحديد هامش قمة: السيارات وهامش القاع: السيارات، كما سيعطي النتيجة نفسها كما هو الحال مع هامش اليسار واليمين هامش مجموعة لصناعة السيارات
- وسوف تكون حرب برامج التصفح على بعض يوم.
- هناك إرادة واحدة فقط متصفح للجميع.
تحميل CSS و HTML من الحل فوق هنا (تم تحميلها 448 مرة) .. عن الفهم، وعدم CSS الأمثل
ملاحظة: وبالمناسبة، هذه هي الصور المصغرة لبعض الصور التي قد نقرت ... 
