[CSS] เซ็ต middle ให้ img tag

นานน๊าาาน ทีจะได้เขียนอะไรเกี่ยวกับ CSS กับเค้าบ้าง
ปัญหามีอยู่ว่าจะเซ็ต <img> ที่อยู่ใน <div> ยังไงให้มัน middle กลาง <div>

+---<div>--------------+
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
+-------------------------+
|                                 |
|                                 |
|                                 |
+-------------<img>---+

จากรูป(แบบกากๆ) คือรูปมันสูงกว่า/เท่ากับ <div> แต่ความกว้างเท่ากัน
ปัญหาก็คือ จะใส่ top ติดลบก็ไม่ได้อีก เพราะไม่รู้ว่า บางรูปที่สูงเกินออกมานั้นจะสูงเท่าไร

จาก Google ไปสักพัก เลยมาแตะตากับ Comment นี้
http://stackoverflow.com/a/8273750

ใช้ได้เว้ยเห้ย!!!

+-------------<img>---+
|                                 |
+---<div>--------------+
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
+-------------------------+
|                                 |
+-------------<img>---+

#div
position: relative;

#img
position: absolute;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;

ลอยอยู่กลางๆ ได้แบ๊วววว

Comments