ทำให้เว็บอยู่ตรงกลางหน้า

ทำให้เว็บอยู่ตรงกลางหน้า

<center>
<body>
...........................
</body>
</center>

ปกติเค้าจะใช้ตารางครอบหน้าเว็บทั้งหมดก่อน แล้ว set ให้ table align=ceter แค่น้เอง ขนาด table width =762 จะดีสำหรับเว็บที่ออกแบบสำหรับหน้าจอ 800x600
<body>
<table align="center" width="762">
<tr>
<td>
ข้อความในเว็บของคุณ
</td>
</tr>
</table>
</body>

<body>
<center>
#############
</center>
</body>

<html>
<title>####</title>
<head>
</head>
<div align="center">
<body>

######

</body>
</div>
</html>

Code (PHP)
<center>
<body>
string
</body>
</center>

อีกทางเลือกครั้บใช้ tag div กับ CSS
<div style="width:600px; margin:0px auto;">เนื้อหาเว็บ</div>

<div align="center"></div> ครอบ html ทั้งหมดใน <body></body>

การวางเนื้อหาให้อยู่ตรงกลางหน้านั่นเอง ปัญหานี้จะเกิดกับคนที่ต้องการกำหนดความกว้างของเว็บไซด์ไว้ตายตัวครับ(fixed) บางคนพอปรับให้อยู่กลางหน้าได้แล้ว (ดูด้วย IE) โอ้โหอยู่ตรงกลางสวยงามครับ แต่พอไปดูด้วย firefox เอาแล้วไงงานเข้าจนได้ ทำไม๊ทำไมไปชิดซ้ายกันหมดเลยล่ะค๊าบบบ ผมก็เลยนำเอาเทคนิคการจัดการกับ layout ให้อยู่กลางหน้ามาฝาก พร่ำมานานแล้วก็เริ่มกันเลยครับ

ก่อนอื่นเราต้องสร้างกำหนดของเขตก่อนว่าจะให้หน้าเว็บของเรากว้างแค่ไหน ด้วยแท็ก div ครับ ผมเอาเป็น 800px ก็แล้วกันนะครับ

<html>
<head><title>Simple center page</title></head>
<body>
<div id=”wrapper”>
blah blah blah …
</div>
</body>
</html>

จากนั้นก็มาถึงขั้นตอนที่จะใช้ css ให้ตัวขอบเขต(<div id=”wrapper”>) ของเราให้อยู่กลางหน้าครับ

<style>
<!–
body{
text-align:center;
}
#wrapper{
margin:0 auto;
width:800px;
text-align:left;
}
–>
</style>

เป็นอันเสร็จพิธีครับ แค่นี้เราก็จัดให้เนื้อหาอยู่ตรงกลางหน้าได้แล้วครับ โดยที่เนื้อหาทั้งหมดที่จะให้แสดงที่เว็บจะต้องอยู่ภายในแท็ก <div id=”wrapper”>

<DIV> ให้หน้าเพจอยู่ตรงกลางของหน้าจอ แบบไหนดีที่สุด
แบบที่ 1

#main {
   width: 800px;
          position:absolute;
          left:50%;                         /* ด้านซ้ายครึ่งจอ  */
          margin-left:-400px;            /*margin-left ติดลบครึ่งหนึ่งของความกว้าง */
          }

แบบที่ 2

#main {
          width: 800px;
          margin-left:auto;
          margin-right:auto;
          }

แบบที่ 3

#main {
          width: 800px;
          margin:auto;
          }

ตามความคิดผม แบบที่ 2 ดีที่สุด

แบบที่ 1 คนนิยมใช้เพราะไม่รู้ว่า margin มัน auto แล้วจะอยู่กึ่งกลางได้เลยกำหนด ให้ติดลบเอา
แบบที่ 2 เว็บต่างประเทศเค้าก็ใช้กันทั่วบ้านทั่วเมือง แต่เห็นหลายเว็บทำไม ถึงใช้แบบแรกอยู่
แบบที่ 3 พอเรากำหนด margin-top หรือ margin-bottom มันจะไม่ไปอยุ่ตรงกลาง อาจจะไม่เกี่ยวก็ได้ครับ ผมอาจจะเขียน CSS ผิด

ผมก็ใช้แบบที่ 2 นะ แต่โค้ดแบบนี้

#main {
     width: 900px;
     margin: 0 auto;
}

แบบสอง เพราะถ้าใช้ absolute
เวลาใช้บน div ซ้อนกัน มันจะจัดการยาก
สรุป ว่าแล้วแต่เคส แต่ส่วนมากผมใช้แบบสอง

แบบสองดีสุดแล้วครับ ทุกอย่างจัดการง่ายครับ ในตอนที่เว็บเราโตขึ้น

ผมใช้

#main{
width:800px;
margin:0 auto;
}

มันจัดกลางหน้าได้
แต่มันจะมีปัญหาเกี่ยวกับการ set ค่า margin อื่นๆ ดังที่ rep ด้านบนกล่าวมาครับ
แต่ดูๆแล้วแบบที่ 2 น่าจะ work ที่สุดครับ

Code ที่ทำให้หน้าเว็บอยู่กลางจอ

#container{background:#fff url(front.png) bottom left no-repeat; border:20px solid #555; color:#555; margin:0 auto 15px; padding:10px; width:700px; line-height:1.3em;}

<div width=100% align=center>............</div>

ถ้า css น่าจะเป็นแบบนี้มากกว่านะ
margin : 0 auto 0 auto;
ระยะจากขอบวัตถุไปข้างนอก = ระยะห่างข้างบน ระยะห่างข้างขวา ระยะห่างข้างล่าง ระยะห่างข้างซ้าย;

ตามนั้น ถ้าคิดอยากทำให้พวก div อยู่ตรงกลาง
คือจะใส่แบบนี้ก็ได้

margin-left : auto;
margin-right : auto;

ก็ได้ แต่พวกนี้จะไม่มีผลถ้ามีการกำหนด
position:absolute; ลงไป

หรือถ้าใช้โค๊ดน้อยที่สุดก็ margin : 0 auto;

ทำให้เว็บอยู่ตรงกลางหน้า

😃 ซื้อผ่านเรา .. เราดูแลคุณ | เมูนูลัด

Cymiz.com Insurance Consult Broker