[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;
ปัญหามีอยู่ว่าจะเซ็ต <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
Post a Comment