ก่อนที่เราจะมีการจัดการกับ CSS เพื่อสร้างเค้าโครงหน้าของเราจัดเนื้อหาบางส่วนที่อยู่ภายในเซลล์ของตารางดูเหมือนเด็กเล่นเพียงของ เพียงแค่ตั้งค่า "จัด" หรือสถานที่ให้บริการ "VALIGN" ของตารางที่จะมีการจัดตำแหน่งที่คุณเลือกชิ้นส่วนของเค้ก!
ด้วยรูปแบบ CSS แต่เรามี "vertical-align" สถานที่ให้บริการสำหรับองค์ประกอบก็ดูเหมือนจะไม่เป็นง่ายๆเป็น "เส้นตรง" หรือคุณสมบัติ "VALIGN" การจะมีมากขึ้น specifiic "vertical-align" ไม่เคยดูเหมือนว่าจะแก้ปัญหาใด ๆ ของคุณโดยเฉพาะถ้ามีการเขียนชิ้นส่วนของ cross-browser CSS
โดยไม่ต้องใช้ตาราง HTML ปัญหาของศูนย์กลางบนวัตถุไม่ว่าจะเป็นภาพหรือข้อความบางส่วนที่มีอยู่ภายในได้รับอาจจะทุก UI / CSS ฝันร้ายนักพัฒนาในบางจุด ปัญหานี้ต่อไป extrapolates กังวลของคุณจากการจัดตำแหน่งหากวัตถุที่จะเป็นศูนย์กลางเป็นแบบไดนามิกในธรรมชาติเช่นเมื่อความสูงของมันคือตัวแปร (ความสูงที่ไม่รู้จัก)
แม้ว่าจะไม่มีวิธีการแก้ปัญหาตรงไปข้างหน้าเป็นที่รู้จักที่จะทำงานในช่วงของเบราว์เซอร์ที่เราต้องจัดการกับการแก้ปัญหาที่ผมได้พยายามที่จะมาถึงที่ไม่ดูเหมือนจะทำงานในเบราว์เซอร์ไม่กี่แห่งที่ผมได้พยายามใน (IE6, IE 7 , FF)
SOLUTION:
ในเบราว์เซอร์เช่น Mozilla, Opera และ Safari แปลกพฤติกรรม "vertical-align" สถานที่ให้บริการสามารถนำความรู้สึกของตนเพียงโดยการตั้งค่า "แสดง" สถานที่ให้บริการของแผนกที่มีการ "ตารางเซลล์" (แสดง: ตารางเซลล์-) .
ปัญหาที่เกิดขึ้นยังคงอยู่กับครอบครัวเบราว์เซอร์ IE ที่ยังดูเหมือนจะไม่เข้าใจว่าจะมี "ตารางเซลล์" ทรัพย์สินและไม่รู้ว่าพวกเขาเป็นพวกเขาก็ไม่สนใจมัน วิธีการแก้ปัญหาให้ด้านล่างนี้แม้ว่าโฆษณาแบบง่ายๆองค์ประกอบเพิ่มเติม 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/> ขอ Views: 3456 </ div>
</ div>
</ div>
ผลมีลักษณะเช่นนี้: -
ดูการสาธิตที่นี่ | ดาวน์โหลดไฟล์ที่มา (Downloaded 452 ครั้ง)
ทำความเข้าใจเกี่ยวกับวิธีการแก้ปัญหา: สำหรับเบราว์เซอร์ที่เข้าใจแสดง: ตารางและการแสดง: คุณสมบัติของตารางเซลล์มันไม่ค่อยจะต้องการคำอธิบายใด ๆ สำหรับ IE มีการใช้สับเฉพาะ IE (สับกัญชา) เราอย่างตำแหน่งที่เก็บวัตถุ (obj_container) ในครึ่งหนึ่งของความสูงใช้ได้ แล้ววัตถุ (obj) ภายในเป็นตำแหน่งที่ค่อนข้างและจะถูกย้ายขึ้นโดยครึ่งหนึ่งของความสูงของมัน ... ดี! ฉันดูเหมือนจะเข้าใจลักษณะบนใบหน้าของคุณ แต่มันใช้งานได้ ลอง! เทคนิคดังกล่าวจะรวมกันเพื่อให้เราแก้ปัญหาเบราว์เซอร์ดังกล่าวข้างต้นข้าม
CSS สามารถแก้ไขได้ง่ายดังต่อไปนี้เพื่อให้บรรลุ vertical-align: บนหรือ vertical-align: ด้านล่าง 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/> ขอ Views: 1234 </ div>
</ div>
</ div>
ผลมีลักษณะเช่นนี้: -
BOTTOM จัด 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/> ขอ Views: 1234 </ div>
</ div>
</ div>
ผลมีลักษณะเช่นนี้: -
ดูการสาธิตที่นี่ | ดาวน์โหลดที่นี่
แนวนอนตรงกลางของวัตถุที่ประสบความสำเร็จเพียงกับสถานที่ให้บริการมาร์จินโดยการตั้งค่าระยะขอบซ้ายและขอบขวาอัตโนมัติ ดูเหมือนว่าทุกเพศทุกวัยตั้งแต่ผมพยายามที่จะหาทางออกที่เหมาะสมเพื่อการจัดแนวนี้ปัญหาที่เกิดขึ้น แต่ตอนนี้มีวิธีการแก้ปัญหานี้ผมรู้สึกเหมือนอยู่ที่ความสงบสุขเล็ก ๆ น้อย ๆ
ด้วยความหวังว่าสักวันหนึ่ง
- สถานที่ให้บริการตามแนวตั้งแนว-ใน CSS จะทำงานเหมือนมันไม่อยู่ภายในเซลล์ของตารางโดยไม่ต้องที่จะชนะมากรอบพุ่มไม้
- อย่างน้อยการตั้งค่า margin-top: รถยนต์และขอบล่าง: อัตโนมัติจะให้เป็นผลเช่นเดียวกับกับขอบซ้ายและชุดขอบขวาอัตโนมัติ
- สงครามเบราว์เซอร์จะมากกว่าบางวัน
- มีเพียงแค่จะเบราว์เซอร์สำหรับทั้งหมด
ดาวน์โหลด CSS และ HTML ของการแก้ปัญหาข้างต้นที่นี่ (Downloaded 452 ครั้ง) .. สำหรับ understandability, CSS ไม่ได้รับการเพิ่มประสิทธิภาพ
PS: และโดยวิธีการเหล่านั้นจะรูปขนาดย่อของภาพบางส่วนที่ผมได้คลิก ... 
