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

online7

หัวหน้าแก๊งเสียว

พลังน้ำใจ: 138

ออฟไลน์

กระทู้: 1,549

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

« ตอบ #20 เมื่อ: 06 กุมภาพันธ์ 2013, 20:14:00 »

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


	บันทึกการเข้า

รับทำเว็บด้วย Wordpress
- รับติดตั้งและลงเว็บ Wordperss เริ่มต้น 200 บาท
- รับปรับแต่งและแก้ไขธีม Wordpress,SMF เริ่มต้น 400 บาท
- รับโมธีม Wordpress เริ่มต้น 700 บาท จำกัด 1 โดเมน : ไม่จำกัดโดเมน 1500 บาท

saikanojo

ก๊วนเสียว

พลังน้ำใจ: 27

ออฟไลน์

กระทู้: 283

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

« ตอบ #21 เมื่อ: 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


« แก้ไขครั้งสุดท้าย: 07 กุมภาพันธ์ 2013, 14:32:38 โดย saikanojo »	บันทึกการเข้า

boonyanone

Newbie

พลังน้ำใจ: 4

ออฟไลน์

กระทู้: 66

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

« ตอบ #22 เมื่อ: 07 กุมภาพันธ์ 2013, 14:58:27 »

อ้างจาก: 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>