ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์CMS & Free Scriptปรับ css อย่างไร ให้ content อยู่ตรงกลางพอดี
« หน้าที่แล้ว ต่อไป »
หน้า: 1 2 [ทั้งหมด]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ปรับ css อย่างไร ให้ content อยู่ตรงกลางพอดี  (อ่าน 7063 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
boonyanone
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



ดูรายละเอียด
« เมื่อ: 05 กุมภาพันธ์ 2013, 16:50:30 »
สอบถามหน่อยครับคือจะแก้หรือเพิ่มเติมในส่วนของ css ตรงใหนครับ ให้ content อยู่ตรงกลางพอดี คืออยากให้ มันอยู่ตรงกลางเท่ากันพอดีทั้งด้านบนและด้านล่าง เมื่อเปิดกับทุก resulotion นะครับ ไม่ทราบว่าต้องปรับแก้ตรงใหนครับ

 wanwan017

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

http://eak.flow.in.th

บันทึกการเข้า
saikanojo
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 283



ดูรายละเอียด
« ตอบ #1 เมื่อ: 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 นี้ผมเขียนสด ยังไม่ได้ลอง แต่คิดว่าน่าจะได้ ติดขัดอะไรลงไว้เด๋วมาตอบเพิ่มให้ครับผม
« แก้ไขครั้งสุดท้าย: 05 กุมภาพันธ์ 2013, 17:02:25 โดย saikanojo » บันทึกการเข้า
boonyanone
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



ดูรายละเอียด
« ตอบ #2 เมื่อ: 05 กุมภาพันธ์ 2013, 17:03:02 »
อ้างจาก: 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 นี้ผมเขียนสด ยังไม่ได้ลอง แต่คิดว่าน่าจะได้ ติดขัดอะไรลงไว้เด๋วมาตอบเพิ่มให้ครับผม

 wanwan017

ขอบคุณครับ
บันทึกการเข้า
saikanojo
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 283



ดูรายละเอียด
« ตอบ #3 เมื่อ: 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
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



ดูรายละเอียด
« ตอบ #4 เมื่อ: 05 กุมภาพันธ์ 2013, 17:20:16 »
อ้างจาก: 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>

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

 wanwan020
บันทึกการเข้า
boonyanone
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



ดูรายละเอียด
« ตอบ #5 เมื่อ: 05 กุมภาพันธ์ 2013, 17:56:55 »
ลองดูแล้วถ้าเปิดใน mobile ภาพมันเต็มหน้าจอเลยครับ ทำอย่างไงถึงจะให้เหมือนใน browser ของ PC อะครับ ต้องปรับตรง

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


ขอบคุณครับ
บันทึกการเข้า
toffyy
Newbie
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 85



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 05 กุมภาพันธ์ 2013, 19:20:39 »
<div style="width:500px; margin:auto;> CONTENT </div>

*** ต้องกำหนด width ด้วยนะครับไม่งั้น ไม่กลาง
บันทึกการเข้า
ba5nanas
ก๊วนเสียว
*

พลังน้ำใจ: 29
ออฟไลน์ ออฟไลน์

กระทู้: 292



ดูรายละเอียด
« ตอบ #7 เมื่อ: 05 กุมภาพันธ์ 2013, 19:25:06 »
img{ width:100%; height:100%; }

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

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

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

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

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

<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>
« แก้ไขครั้งสุดท้าย: 05 กุมภาพันธ์ 2013, 19:47:53 โดย ba5nanas » บันทึกการเข้า
Wordpress Developer High End

http://www.ba5nanas.com
boonyanone
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



ดูรายละเอียด
« ตอบ #8 เมื่อ: 05 กุมภาพันธ์ 2013, 20:02:39 »
อ้างจาก: ba5nanas ที่ 05 กุมภาพันธ์ 2013, 19:25:06
img{ width:100%; height:100%; }

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

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

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

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

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

<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>


ขอบคุณมากครับ ถ้าติดขัดอย่างไร อาจจะสอบถามเพิ่มเติมหน่อยนะครับ
 wanwan017
บันทึกการเข้า
saikanojo
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 283



ดูรายละเอียด
« ตอบ #9 เมื่อ: 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%; ผมว่าก็ไม่น่าจะได้แล้วนะครับ  Tongue

ห่างจากข้างบน 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
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



ดูรายละเอียด
« ตอบ #10 เมื่อ: 05 กุมภาพันธ์ 2013, 22:36:22 »
ขอบคุณทุกๆท่านมากเลยครับ ที่เข้ามาช่วย


 wanwan017
บันทึกการเข้า
boonyanone
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



ดูรายละเอียด
« ตอบ #11 เมื่อ: 06 กุมภาพันธ์ 2013, 12:25:34 »
อ้างจาก: 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%; ผมว่าก็ไม่น่าจะได้แล้วนะครับ  Tongue

ห่างจากข้างบน 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 ให้หน่อยครับ ว่าต้องเป็นอย่างไร ถึงจะได้ให้มันพอกึ่งกลางบนล่าง  Tongue


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

#content-full {
   position: fixed;
   height: 100%;
   z-index: 9999;
   margin-top: -25%;
   width: 100%;
   top: 50%;
}
บันทึกการเข้า
boonyanone
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



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

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


#content-full {
   width:100%;
   height:560px;
   position:fixed;
   top:50%;
   left:50%;
   margin-left:-50%;
   margin-top:-280px;
}
บันทึกการเข้า
saikanojo
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 283



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

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


#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
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 16
ออฟไลน์ ออฟไลน์

กระทู้: 1,022



ดูรายละเอียด เว็บไซต์
« ตอบ #14 เมื่อ: 06 กุมภาพันธ์ 2013, 16:17:18 »
แต่ละคนเซียน css กันทั้งนั้น  ได้ความรู้ไปด้วย ขอบคุณครับ  wanwan017
บันทึกการเข้า
ครีมหมอจุฬา ผ่าน อย. อยากหน้าใส ไร้รอยด่างดำ ครีมหมอจุฬาซื้อที่ไหน หาไม่ยากเลย แต่ระวังของปลอมนะ ของเราเป็น ครีมหมอจุฬาของแท้ 100% มาดูสินค้าก่อนได้

boonyanone
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



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

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


#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);
}
« แก้ไขครั้งสุดท้าย: 06 กุมภาพันธ์ 2013, 17:22:50 โดย boonyanone » บันทึกการเข้า
moshikub1
สมุนแก๊งเสียว
*

พลังน้ำใจ: 45
ออฟไลน์ ออฟไลน์

กระทู้: 712



ดูรายละเอียด เว็บไซต์
« ตอบ #16 เมื่อ: 06 กุมภาพันธ์ 2013, 17:38:47 »
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*/
	}
« แก้ไขครั้งสุดท้าย: 06 กุมภาพันธ์ 2013, 17:41:37 โดย moshikub1 » บันทึกการเข้า
งานออนไลน์ | รายได้เสริม |   รายได้พิเศษ | ธุรกิจออนไลน์ | ชุดเวียดนาม

รับปั่น UIP ละ 6 บาทต่อเดือน เช่น 1000UIP/วัน = 6000 บาท จำนวนเยอะต่อรองราคาได้ เป็นคนไทยคนจริง 99%

รับทำ Autopost CURL หน้าเว็บได้ทุกรูปแบบครับ PM มาได้เลย ราคาสบายๆ
MD.18
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 287
ออฟไลน์ ออฟไลน์

กระทู้: 3,008



ดูรายละเอียด เว็บไซต์
« ตอบ #17 เมื่อ: 06 กุมภาพันธ์ 2013, 17:40:51 »
อ่าน ๆ ดูยัง งง ว่าต้องการแบบไหนเหรอครับ เผื่อช่วยได้  Tongue

ต้องการให้เนื้อหาทั้งหมดอยู่กลางทั้ง ซ้าย-ขวา กว้าง 100% |  บน-ล่าง  หรือเปล่า แล้วแต่ละหน้าจอต้องให้อยู่กลางตลอด ใช่ป่าว
บันทึกการเข้า
ติดต่อทางเมล์ [email protected] by ทวีศักดิ์  line : 0862600055

คิวงานว่าง !!
boonyanone
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 66



ดูรายละเอียด
« ตอบ #18 เมื่อ: 06 กุมภาพันธ์ 2013, 18:55:30 »
อ้างจาก: MD.18 ที่ 06 กุมภาพันธ์ 2013, 17:40:51
อ่าน ๆ ดูยัง งง ว่าต้องการแบบไหนเหรอครับ เผื่อช่วยได้  Tongue

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

ใช่เลยครับ เป็น fullsceen 100% แต่เหลือ บน ล่าง ให้อยู่กึ่งกลางเท่ากัน ทุก device  wanwan003
บันทึกการเข้า
Love Family
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 152
ออฟไลน์ ออฟไลน์

กระทู้: 1,511



ดูรายละเอียด
« ตอบ #19 เมื่อ: 06 กุมภาพันธ์ 2013, 20:00:41 »

.body{
 margin: 0 auto;
}
บันทึกการเข้า
สุขภาพแข็งแรง โชคดีตลอดไป
online7
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 138
ออฟไลน์ ออฟไลน์

กระทู้: 1,549



ดูรายละเอียด
« ตอบ #20 เมื่อ: 06 กุมภาพันธ์ 2013, 20:14:00 »
มาเก็บความรู้
บันทึกการเข้า
รับทำเว็บด้วย Wordpress
- รับติดตั้งและลงเว็บ Wordperss เริ่มต้น 200 บาท
- รับปรับแต่งและแก้ไขธีม Wordpress,SMF เริ่มต้น 400 บาท
- รับโมธีม Wordpress เริ่มต้น 700 บาท จำกัด 1 โดเมน : ไม่จำกัดโดเมน 1500 บาท
saikanojo
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 283



ดูรายละเอียด
« ตอบ #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



ดูรายละเอียด
« ตอบ #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>


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

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

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

 wanwan017

ขอบคุณมากๆเลยครับ  Cry
บันทึกการเข้า
ba5nanas
ก๊วนเสียว
*

พลังน้ำใจ: 29
ออฟไลน์ ออฟไลน์

กระทู้: 292



ดูรายละเอียด
« ตอบ #23 เมื่อ: 07 กุมภาพันธ์ 2013, 18:16:51 »
safari มีเงื่อนไข อีกเยอะครับ ทำให้ตายก็ไม่เท่ากันหรอกครับนอกจาก จะ css3 มาระบุ แต่ละความกว้างของหน้าจอ แบบนั้นดีกว่าเยอะ
บันทึกการเข้า
Wordpress Developer High End

http://www.ba5nanas.com
หน้า: 1 2 [ทั้งหมด]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: