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

boonyanone

สอบถามหน่อยครับคือจะแก้หรือเพิ่มเติมในส่วนของ css ตรงใหนครับ ให้ content อยู่ตรงกลางพอดี คืออยากให้ มันอยู่ตรงกลางเท่ากันพอดีทั้งด้านบนและด้านล่าง เมื่อเปิดกับทุก resulotion นะครับ ไม่ทราบว่าต้องปรับแก้ตรงใหนครับ

ขอบคุณทุกคนครับ

http://eak.flow.in.th

saikanojo

ความสูงรูปคุณคือ 445px

ความสูงของจอไม่แน่นอน แต่ความสูง IMG นิ่ง ทำได้แน่นอนครับ ต้องทำให้ DIV ที่คลุมอยู่เป็น Absolute หรือ Fixed มันถึงจะคำนวณแบบอิสระได้ครับ โดยไม่ต้องพึ่ง JS ให้ปวดหัว

ไว้ต่อจาก<body> ไปเลยครับ
<div class="div-a">div ที่ลอยตัว</div>

.div-a{ position: fixed; top:50%; width: 100%; height:445px; z-index:9999; margin-top: -223px; background: #C1C1C1; }

div-a จะอยู่กลางจอ โดย บนห่างจากล่างเสมอครับ

ลองเอาไป แปะใน HTML ธรรมดาดูครับ code นี้ผมเขียนสด ยังไม่ได้ลอง แต่คิดว่าน่าจะได้ ติดขัดอะไรลงไว้เด๋วมาตอบเพิ่มให้ครับผม

boonyanone

อ้างถึงจาก: saikanojo ใน 05 กุมภาพันธ์ 2013, 17:01:26
ความสูงรูปคุณคือ 445px

ความสูงของจอไม่แน่นอน แต่ความสูง IMG นิ่ง ทำได้แน่นอนครับ ต้องทำให้ DIV ที่คลุมอยู่เป็น Absolute หรือ Fixed มันถึงจะคำนวณแบบอิสระได้ครับ โดยไม่ต้องพึ่ง JS ให้ปวดหัว

ไว้ต่อจาก<body> ไปเลยครับ
<div class="div-a">div ที่ลอยตัว</div>

.div-a{ position: fixed; top:50%; width: 100%; height:445px; z-index:9999; margin-top: -223px; background: #C1C1C1; }

div-a จะอยู่กลางจอ โดย บนห่างจากล่างเสมอครับ

ลองเอาไป แปะใน HTML ธรรมดาดูครับ code นี้ผมเขียนสด ยังไม่ได้ลอง แต่คิดว่าน่าจะได้ ติดขัดอะไรลงไว้เด๋วมาตอบเพิ่มให้ครับผม

ขอบคุณครับ

saikanojo

ได้ครับ ผมลองดูละ

โค้ด เลือก


<!doctype html>
<html lang="en">
	<head>
		<title>Test</title>
		<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%; }
		</style>
	</head>
	<body>
		<div class="div-a"><img src="img.jpg"/></div>
	</body>
</html>

boonyanone

อ้างถึงจาก: saikanojo ใน 05 กุมภาพันธ์ 2013, 17:09:31
ได้ครับ ผมลองดูละ
โค้ด เลือก ขยาย
<!doctype html> <html lang="en"> <head> <title>Test</title> <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%; } </style> </head> <body> <div class="div-a"><img src="img.jpg"/></div> </body> </html>

ขอบคุณครับ สุดยอด เดี๋ยวลองไปปรับดู

boonyanone

ลองดูแล้วถ้าเปิดใน mobile ภาพมันเต็มหน้าจอเลยครับ ทำอย่างไงถึงจะให้เหมือนใน browser ของ PC อะครับ ต้องปรับตรง

.div-a img { width: 100%; height: 100%; } ใช่หรือป่าว

ขอบคุณครับ

toffyy

<div style="width:500px; margin:auto;> CONTENT </div>

*** ต้องกำหนด width ด้วยนะครับไม่งั้น ไม่กลาง

ba5nanas

img{ width:100%; height:100%; }

จะให้ content อยู่เท่ากันพอดี ขั้นต่ำ ที่สุดก็ 1024 ก็พอแล้วมั้งครับ

ส่วนจะให้อยู่ตรงกลางพอดี ควรใช้ margin:auto; position:relative; ครับ

width:960px; มาตราฐานที่สุดครับ

http://960.gs/ ลองดูนี่ครับแล้วลองหัดใช้ดูครับ ผมว่าเป็นอีกตัวเลือกสำหรับสร้างเว็บที่มีระเบียบ และ

ประหยัดเวลา แบบไม่เลวเลยนะครับ

<body>
<div style="width:100%">
<div style="background:#ccc; height:250px; width:100%;">
</div>
<div style="background:#2d2d2d; color:#ccc; position:relative; margin:auto; width:80%; font-size:14%;">
Test
</div>
</body>

ราวๆนี้ละมั้งผม เดาเอาครับ

ปล เขียนสด

Edit
ขอโทษที ผมอ่านคำสั่งผิดไปหน่อยตอนแรกนึกว่าจะจัดให้อยู่ตรงกลาง ผมไปลองมาดีดีละน่าจะราวๆนี้

<body style="margin:0px;">
<div style="width:100%">
<div style="background:#ccc; position:fixed; height:50%; width:100%; background:url('ใส่ background') fixed;">
</div>
<div style="background:#2d2d2d; color:#ccc; position:fixed; margin:auto; top:50%; width:100%; height: 50%; font-size:14%;">
<div style="margin:auto; width: 80%; background:#eee;">
Test
</div>
</div>
</body>

boonyanone

อ้างถึงจาก: ba5nanas ใน 05 กุมภาพันธ์ 2013, 19:25:06
img{ width:100%; height:100%; }

จะให้ content อยู่เท่ากันพอดี ขั้นต่ำ ที่สุดก็ 1024 ก็พอแล้วมั้งครับ

ส่วนจะให้อยู่ตรงกลางพอดี ควรใช้ margin:auto; position:relative; ครับ

width:960px; มาตราฐานที่สุดครับ

http://960.gs/ ลองดูนี่ครับแล้วลองหัดใช้ดูครับ ผมว่าเป็นอีกตัวเลือกสำหรับสร้างเว็บที่มีระเบียบ และ

ประหยัดเวลา แบบไม่เลวเลยนะครับ

<body>
<div style="width:100%">
<div style="background:#ccc; height:250px; width:100%;">
</div>
<div style="background:#2d2d2d; color:#ccc; position:relative; margin:auto; width:80%; font-size:14%;">
Test
</div>
</body>

ราวๆนี้ละมั้งผม เดาเอาครับ

ปล เขียนสด

Edit
ขอโทษที ผมอ่านคำสั่งผิดไปหน่อยตอนแรกนึกว่าจะจัดให้อยู่ตรงกลาง ผมไปลองมาดีดีละน่าจะราวๆนี้

<body style="margin:0px;">
<div style="width:100%">
<div style="background:#ccc; position:fixed; height:50%; width:100%; background:url('ใส่ background') fixed;">
</div>
<div style="background:#2d2d2d; color:#ccc; position:fixed; margin:auto; top:50%; width:100%; height: 50%; font-size:14%;">
<div style="margin:auto; width: 80%; background:#eee;">
Test
</div>
</div>
</body>

ขอบคุณมากครับ ถ้าติดขัดอย่างไร อาจจะสอบถามเพิ่มเติมหน่อยนะครับ

saikanojo

โค้ด เลือก

<body style="margin:0px;">
<div style="width:100%">
<div style="background:#ccc; position:fixed; height:50%; width:100%; background:url('ใส่ background') fixed;">
</div>
<div style="background:#2d2d2d; color:#ccc; position:fixed; margin:auto; top:50%; width:100%; height: 50%; font-size:14%;">
    <div style="margin:auto; width: 80%; background:#eee;">
        Test
    </div>
</div>
</body>

เห็น top:50%; width:100%; height: 50%; ผมว่าก็ไม่น่าจะได้แล้วนะครับ

ห่างจากข้างบน 50% แถมส่วนสูง container เป็น 50% ของจออีก มันก็อยู่ล่างจอสิครับ

จขกท ต้องการ ล่าง บนเฉลี่ยเท่ากัน แค่นั้นเอง

เรื่องมือ ถ้าจะให้มือถือ ไม่เต็ม บน ล่าง ก็เขียนดัก Device เอา Overline แค่ค่า Height ออก ก็ใช้ได้แล้วครับ(media-queries-for-standard-devices)

หรือถ้าอยากให้อยู่กลางระหว่าง บน ล่าง ของมือถืออีก โดยไม่ต้องเขียนดัก ก็ Height 50% แล้ว margin-top: -25%; ก็น่าโอเคแล้ว

ไม่มีอะไรซับซ้อนเลย

สรุป

กึ่งกลางแนวนอน : กำหนด Width > ใส่ Margin 0 auto จบ
กึ่งกลางแนวตั้ง : position: fixed; top:50%; height: X; z-index:9999; margin-top: -(X/2); จบ

boonyanone

ขอบคุณทุกๆท่านมากเลยครับ ที่เข้ามาช่วย

boonyanone

อ้างถึงจาก: saikanojo ใน 05 กุมภาพันธ์ 2013, 21:34:15
โค้ด เลือก ขยาย
<body style="margin:0px;"> <div style="width:100%"> <div style="background:#ccc; position:fixed; height:50%; width:100%; background:url('ใส่ background') fixed;"> </div> <div style="background:#2d2d2d; color:#ccc; position:fixed; margin:auto; top:50%; width:100%; height: 50%; font-size:14%;"> <div style="margin:auto; width: 80%; background:#eee;"> Test </div> </div> </body>

เห็น top:50%; width:100%; height: 50%; ผมว่าก็ไม่น่าจะได้แล้วนะครับ

ห่างจากข้างบน 50% แถมส่วนสูง container เป็น 50% ของจออีก มันก็อยู่ล่างจอสิครับ

จขกท ต้องการ ล่าง บนเฉลี่ยเท่ากัน แค่นั้นเอง

เรื่องมือ ถ้าจะให้มือถือ ไม่เต็ม บน ล่าง ก็เขียนดัก Device เอา Overline แค่ค่า Height ออก ก็ใช้ได้แล้วครับ(media-queries-for-standard-devices)

หรือถ้าอยากให้อยู่กลางระหว่าง บน ล่าง ของมือถืออีก โดยไม่ต้องเขียนดัก ก็ Height 50% แล้ว margin-top: -25%; ก็น่าโอเคแล้ว

ไม่มีอะไรซับซ้อนเลย

สรุป

กึ่งกลางแนวนอน : กำหนด Width > ใส่ Margin 0 auto จบ
กึ่งกลางแนวตั้ง : position: fixed; top:50%; height: X; z-index:9999; margin-top: -(X/2); จบ

รบกวนอีกครับ ผมลองแล้วแบบนี้ มันไม่ได้อะครับ งั้นรบกวนช่วยแทรกใน css ให้หน่อยครับ ว่าต้องเป็นอย่างไร ถึงจะได้ให้มันพอกึ่งกลางบนล่าง

ขอบคุณมากครับ

#content-full {
   position: fixed;
   height: 100%;
   z-index: 9999;
   margin-top: -25%;
   width: 100%;
   top: 50%;
}

boonyanone

ปรับให้อยู่เฉลี่ยกึ่งกลางบนล่าง ใน browser ของ PC ได้แล้วครับ แต่ใน Mobile ผมต้องปรับตรงใหนเพิ่มครับ

ขอบคุณทุกท่านครับ

#content-full {
   width:100%;
   height:560px;
   position:fixed;
   top:50%;
   left:50%;
   margin-left:-50%;
   margin-top:-280px;
}

saikanojo

อ้างถึงจาก: boonyanone ใน 06 กุมภาพันธ์ 2013, 15:16:49
ปรับให้อยู่เฉลี่ยกึ่งกลางบนล่าง ใน browser ของ PC ได้แล้วครับ แต่ใน Mobile ผมต้องปรับตรงใหนเพิ่มครับ

ขอบคุณทุกท่านครับ

#content-full {
   width:100%;
   height:560px;
   position:fixed;
   top:50%;
   left:50%;
   margin-left:-50%;
   margin-top:-280px;
}

width: 100%; แลเวไม่จำเป็นต้อง Left 50% แล้วมาหักลบด้วย margin หรอกครับ Left 0 ไปเลยครับผม

ส่วนมือถือนะครับ

โค้ด เลือก


@media only screen  and (min-device-width : 320px)  and (max-device-width : 480px) {
     height: X;
     margin-top: -(X/2);
}
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
     height: X;
     margin-top: -(X/2);
}

เอา code วางไว้ชุดหลังๆ ของ CSS เลยครับ ค่า Height ต้องลองใส่ไปเรื่อยๆครับ อยู่ที่ว่าอยากได้สูงสักเท่าไร และค่า margin เช่นเดียวกัน ครับ

flash

แต่ละคนเซียน css กันทั้งนั้น ได้ความรู้ไปด้วย ขอบคุณครับ

boonyanone

อ้างถึงจาก: saikanojo ใน 06 กุมภาพันธ์ 2013, 15:37:25
อ้างถึงจาก: boonyanone ใน 06 กุมภาพันธ์ 2013, 15:16:49
ปรับให้อยู่เฉลี่ยกึ่งกลางบนล่าง ใน browser ของ PC ได้แล้วครับ แต่ใน Mobile ผมต้องปรับตรงใหนเพิ่มครับ

ขอบคุณทุกท่านครับ

#content-full {
   width:100%;
   height:560px;
   position:fixed;
   top:50%;
   left:50%;
   margin-left:-50%;
   margin-top:-280px;
}

width: 100%; แลเวไม่จำเป็นต้อง Left 50% แล้วมาหักลบด้วย margin หรอกครับ Left 0 ไปเลยครับผม

ส่วนมือถือนะครับ

โค้ด เลือก ขยาย
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { height: X; margin-top: -(X/2); } @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { height: X; margin-top: -(X/2); }

เอา code วางไว้ชุดหลังๆ ของ CSS เลยครับ ค่า Height ต้องลองใส่ไปเรื่อยๆครับ อยู่ที่ว่าอยากได้สูงสักเท่าไร และค่า margin เช่นเดียวกัน ครับ

ลองปรับดูแล้วครับ ตามที่บอกมา แต่ไม่เปลี่ยนแปลงเลย height ใล่ใส่ตั้งแต่ 50-500 แต่รูปแบบการแสดงก็ไม่เปลี่ยนแปลงเลยครับ พอเอาคำสั่งออก ก็เป็นเหมือนเดิมกับตอนที่ยังไม่ได้ใส่คำสั่ง

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
height: X;
margin-top: -(X/2);
}
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
height: X;
margin-top: -(X/2);
}

moshikub1

ccs3 ใช้ media query ช่วยครับ

เขียน css คลุมทุกหน้าจอครับ ลองปรับจากพวก max-width เป็น max-height ดูครับ

โค้ด เลือก


	@media (max-width: 400px) { 
		/*css*/
	}
	
	@media (max-width: 480px) {
		/*css*/
	}
	
	@media (max-width: 767px) { 
		/*css*/
	}
	
	@media (min-width: 768px) { 
		/*css*/
	}
	
	@media (min-width: 768px) and (max-width: 979px) { 
		/*css*/
	}
	
	@media (max-width: 979px) {
		/*css*/
	}
	
	@media (min-width: 980px) { 
		/*css*/
	}
	
	@media (min-width: 1200px) { 
		/*css*/
	}

MD.18

อ่าน ๆ ดูยัง งง ว่าต้องการแบบไหนเหรอครับ เผื่อช่วยได้

ต้องการให้เนื้อหาทั้งหมดอยู่กลางทั้ง ซ้าย-ขวา กว้าง 100% | บน-ล่าง หรือเปล่า แล้วแต่ละหน้าจอต้องให้อยู่กลางตลอด ใช่ป่าว

boonyanone

อ้างถึงจาก: MD.18 ใน 06 กุมภาพันธ์ 2013, 17:40:51
อ่าน ๆ ดูยัง งง ว่าต้องการแบบไหนเหรอครับ เผื่อช่วยได้

ต้องการให้เนื้อหาทั้งหมดอยู่กลางทั้ง ซ้าย-ขวา กว้าง 100% | บน-ล่าง หรือเปล่า แล้วแต่ละหน้าจอต้องให้อยู่กลางตลอด ใช่ป่าว

ใช่เลยครับ เป็น fullsceen 100% แต่เหลือ บน ล่าง ให้อยู่กึ่งกลางเท่ากัน ทุก device

Love Family

.body{
margin: 0 auto;
}

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 มาระบุ แต่ละความกว้างของหน้าจอ แบบนั้นดีกว่าเยอะ