การแสดงไอที

ก่อนที่เราจะมีการจัดการกับ CSS เพื่อสร้างเค้าโครงหน้าของเราจัดเนื้อหาบางส่วนที่อยู่ภายในเซลล์ของตารางดูเหมือนเด็กเล่นเพียงของ เพียงแค่ตั้งค่า "จัด" หรือสถานที่ให้บริการ "VALIGN" ของตารางที่จะมีการจัดตำแหน่งที่คุณเลือกชิ้นส่วนของเค้ก!
ด้วยเค้าโครง CSS แต่เรามี "vertical-align" คุณสมบัติสำหรับองค์ประกอบมันดูเหมือนจะไม่เป็นง่ายๆเป็น "เส้นตรง" หรือคุณสมบัติ "VALIGN" การจะมีมากขึ้น specifiic "vertical-align" ไม่เคยดูเหมือนว่าจะแก้ปัญหาใด ๆ ของคุณโดยเฉพาะถ้ามีการเขียนชิ้นส่วนของ cross-browser CSS

โดยไม่ต้องใช้ตาราง HTM​​L ปัญหาของศูนย์กลางบนวัตถุไม่ว่าจะเป็นภาพหรือข้อความบางส่วนที่มีอยู่ภายในได้รับอาจจะทุก 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: และโดยวิธีการเหล่านั้นจะรูปขนาดย่อของภาพบางส่วนที่ผมได้คลิก ...