ปรับ css อย่างไร ให้ content อยู่ตรงกลางพอดี

online7

มาเก็บความรู้

saikanojo


<!doctype html>
<html lang="en">
	<head>
		<title>Test</title>
		<link href="mob.css"  type="text/css" rel="stylesheet"/>
		<style>
			*{ margin: 0; padding: 0; }
			.div-a{ position: fixed; top:50%; width: 100%; height:445px; z-index:9999; margin-top: -223px; background: #C1C1C1; }
			.div-a img { width: 100%; height: 100%; }
						
			@media only screen and (max-width: 640px){
				.div-a{ 
				     height: 100px !important;
				     margin-top: -50px !important;
			     }
			}
			@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
			     .div-a{ 
				     height: 100px !important;
			    	 margin-top: -50px !important;
			     }
			}
		</style>
	</head>
	<body>
		<div class="div-a"><img src="img.jpg"/></div>
	</body>
</html>

คุณไม่ต้องไปสนใจ คำตอบที่มี margin 0 auto เลยครับ ผมสรุปคำสั่งการจัดกลางทั้งสองรูปแบบไปหมดแล้ว

อันนี้เทสในคอมได้แน่นอน แต่จริงๆ ควรเอามือถือมาเช็ค เพราะ Browser ไม่สามารถจับ Device ของมือถือได้ มันจับได้แค่ Size Browser เท่านั้น

หน้าจอของตระกูล Ipad Iphone รุ่นใหม่เป็น Retina หมดแล้ว เงื่อนไขจะเยอะกว่านี้อีก ถ้าจะให้ทุกแพลตฟอร์ม ผมแนะนำให้ ลองเอาคำที่ผมลงไว้ไปค้าหาเพิ่มนะครับ

แต่ Code ที่ให้ไปน้ใช้ได้แน่นอน บน Browser

boonyanone

อ้างถึงจาก: saikanojo ใน 07 กุมภาพันธ์ 2013, 14:29:28
โค้ด เลือก ขยาย
<!doctype html> <html lang="en"> <head> <title>Test</title> <link href="mob.css" type="text/css" rel="stylesheet"/> <style> *{ margin: 0; padding: 0; } .div-a{ position: fixed; top:50%; width: 100%; height:445px; z-index:9999; margin-top: -223px; background: #C1C1C1; } .div-a img { width: 100%; height: 100%; } @media only screen and (max-width: 640px){ .div-a{ height: 100px !important; margin-top: -50px !important; } } @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { .div-a{ height: 100px !important; margin-top: -50px !important; } } </style> </head> <body> <div class="div-a"><img src="img.jpg"/></div> </body> </html>

คุณไม่ต้องไปสนใจ คำตอบที่มี margin 0 auto เลยครับ ผมสรุปคำสั่งการจัดกลางทั้งสองรูปแบบไปหมดแล้ว

อันนี้เทสในคอมได้แน่นอน แต่จริงๆ ควรเอามือถือมาเช็ค เพราะ Browser ไม่สามารถจับ Device ของมือถือได้ มันจับได้แค่ Size Browser เท่านั้น

หน้าจอของตระกูล Ipad Iphone รุ่นใหม่เป็น Retina หมดแล้ว เงื่อนไขจะเยอะกว่านี้อีก ถ้าจะให้ทุกแพลตฟอร์ม ผมแนะนำให้ ลองเอาคำที่ผมลงไว้ไปค้าหาเพิ่มนะครับ

แต่ Code ที่ให้ไปน้ใช้ได้แน่นอน บน Browser

ขอบคุณมากๆเลยครับ

ba5nanas

safari มีเงื่อนไข อีกเยอะครับ ทำให้ตายก็ไม่เท่ากันหรอกครับนอกจาก จะ css3 มาระบุ แต่ละความกว้างของหน้าจอ แบบนั้นดีกว่าเยอะ

ปรับ css อย่างไร ให้ content อยู่ตรงกลางพอดี

online7

saikanojo

boonyanone

ba5nanas