ปรับ 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;
}