จัดข้อความให้อยู่ตรงกลาง html

การจัดตำแหน่งวัตถุไว้กลางเอกสารที่ง่ายที่สุดคือ การจัดบรรทัดตัวหนังสือในย่อหน้าหรือบริเวณหัวเรื่อง โดยใช้คำสั่ง 'text-align' ใน CSS

P { text-align: center } H2 { text-align: center }

คำสั่งนี้จะทำให้แต่ละบรรทัดใน ย่อหน้า และหัวเรื่อง (H2) อยู่กึ่งกลางระหว่างค่า margin ที่กำหนด ดังนี้:

บรรทัดในย่อหน้านี้อยู่กึ่งกลางระหว่างค่า margin ของย่อหน้า โดยใช้ค่า 'center' ใน CSS ของ property 'text-align'.

snippet อีกอย่างที่มักจะใช้กับ block element อย่างเช่น div หรือสามารถนำไปประยุกต์ใช้กับรูปภาพได้อีกด้วย เพื่อให้รูปภาพอยู่กึ่งกลาง

text-align: center; display: inline-block;

อันนี้ใช้บ่อยกับ list ที่อยู่ในรูปแบบเรียงกันในแนวนอน ใช้กับเมนูที่ใช้ ul, li ได้เลย

display: flex; justify-content: center;

snippet สุดท้ายที่พอจะรวบรวมได้เป็นการใช้ flex เข้ามาช่วย อันนี้เห็นไม่บ่อยนักเพราะ web broswer เก่าๆ อย่าง IE เวอร์ชั่น 9 ลงไปยังไม่รองรับ flexbox ส่วนคนที่ใช้ modern browser นั้นสามารถใช้งานได้ปรกติ และดูเหมือนจะใช้ง่าย, ได้ผลดีกว่า snippet อื่นๆ ด้วย

จัดกึ่งกลางแนวตั้ง

ส่วนที่เป็น block ให้ใช้

display: table;

และส่วนที่เป็น element ลูกที่อยู่ข้างในใช้

display: table-cell; text-align: center; vertical-align: middle;

เหมือนจะทำให้ div กลายเป็นการใช้งานแบบ table ซึ่งเราต้องสร้าง parent หรือที่เป็น block level ให้ใช้ display แบบ table เสียก่อน แล้วค่อยให้ child level เป็นแบบ table-cell ข้อดีคือ browser จะคำนวณระยะห่างจากบนลงล่าง และ ซ้ายมาขวาให้เอง ไม่ว่า content ของ child level จะยืดขนาดไหน

ตัวอย่างเหมือนกับที่ใช้บนเว็บ JindaTheme.com

อีกวิธีนึงจะเป็นการขยายจากตัวของ content เองด้วย padding เช่น

padding-top: 20px; padding-bottom: 20px;

อันนี้จะเหมาะกับประเภทของ link หรือ div หรือ input ที่บางครั้งอาจจะต้องการสร้างให้เหมือนกับปุ่ม หรือเป็น navigation

กึ่งกลางทั้งแนวตั้ง และนอน

วิธีแรกเป็นแบบโบราณ ที่ใช้กันมานมนาน แต่ยังใช้ได้อยู่จนถึงปัจจุบัน แล้วก็ใช้กับ web browser เก่าๆ อย่าง IE8 ด้วย ซึ่งข้อเสียมีเพียงอย่างเดียวคือจำเป็นต้องรู้ทั้งความกว้าง และความสูงที่แน่นอนเสียก่อน (อาจจะใช้ Javascript ช่วยเพื่อหาได้)

width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px;

กล่าวคือ ถ้าความกว้าง และสูงมีค่าเท่าไหร่ ให้นำไปหารออกครึ่งนึงแล้วนำค่านั้นไปยัดลงกับ margin ครับ (ต้องเป็นค่าติดลบ)

วิธีสุดท้ายเป็นการใช้ flexbox ซึ่งจะง่าย และสั้นกว่าแบบแรกมาก แต่ข้อเสียก็คือไม่สามารถใช้ร่วมกับ web browser ที่ต่ำกว่า IE9(หรือ IE10) ได้

display: flex; justify-content: center; align-items: center;

เพียงใช้ snippet ข้างต้นไปใส่กับ block level เพียงเท่านี้ก็สามารถจัดตำแหน่งของ content ภายในให้อยู่แบบกึ่งกลางได้แล้ว ส่วนใครที่มีเทคนิคการจัดกึ่งกลางด้วย CSS สามารถแนะนำกันเข้ามาได้ทาง comment หรืออีเมล์ได้เลยครับ

ตัวเอียง ตัวหนา หรือแบบอักษรแบบต่างนั้นมีเพื่อให้เราอ่านบทความได้ง่ายขึ้น หรือเป็นการเน้นคำ ซึ่งในบทนี้เราจะมาดูกันว่ามีคำสั่งอะไรบ้าง

1. คำสั่งที่ใช้ในการจัดลักษณะตัวอักษร
ในหัวข้อนี้จะเป็นคำสั่งที่ใช้ในการจัดรูปแบบทั่วไปเช่นตัวเอียง ตัวหนา คำสั่งเราจะแบ่งได้เป็น 2 พวกดังนี้

1.1. แบ่งตามลักษณะที่ปรากฏ เช่นตัวเอียง ตัวหนา

HTMLรูปแบบที่แสดง




ตัวอักษรแบบตัวหนา (bold)
ตัวอักษรแบบตัวเอน (italic)
ตัวอักษรแบบตัวขีดฆ่า (strike)
ตัวอักษรแบบตัวห้อย (subscripted)
ตัวอักษรแบบตัวยก (superscripted)
ตัวอักษรแบบขีดเส้นใต้ (underline)

1.2. แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก

HTMLรูปแบบที่แสดง



บรรทัดที่ 1
บรรทัดที่ 2
บรรทัดที่ 3
0ใช้เน้นข้อความ คำพูดหรือวลี (emphasized)
ใช้เน้นข้อความที่สำคัญมากๆ (strong)
ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted)
ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted)
ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code)
ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)

B ให้ผลลัพธ์เหมือนกับ Strong เราจะเลือกใช้แบบใดก็ได้ ให้ผลลัพท์เหมือนกันแต่อาจจะมีความหมายในการใช้งานที่ต่างกัน

คลิกเพื่อทดลองเขียนด้วยตัวเอง

2. คำสั่งที่ทำให้รูปแบบตัวอักษรใน soure code เหมือนกับที่แสดงผล
Pre tag จะมีประโยชน์มากในการที่เราจะแสดงบทความที่มีเนื้อหามาก หรือ คัดลอกเนื้อหาจากที่อื่นมาทำให้เราไม่ต้องขึ้นบรรทัดใหม่ด้วยคำสั่ง br และใช้ในการแสดง source code ได้ดีอีกด้วย

รูปแบบของ Pre tag

.....

คลิกเพื่อทดลองเขียนด้วยตัวเอง

3. คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ
สัญลักษณ์พิเศษบางตัวเช่น เครื่องหมายมากว่า (>) หรือ เครื่องหมายน้อยกว่า (<) ซึ่งเครื่องหมายเหล่านี้ใช้ในภาษา HTML ด้วยทำให้ตัวอักษรที่อยู่ในเครื่องหมายเหล่านี้กลายเป็น Tag หมด หรือเครื่องหมายที่ไม่มีบนคีบอร์ด แต่ถ้าเราต้องการแสดงเครื่องหมายเหล่านี้เราต้องใช้ Entity Name แทน ตามแบบด้านล่าง

CharacterEntityName©©COPYRIGHT SIGN®®REGISTERED SIGN™™TRADE MARK SIGN>>GREATER-THAN SIGN<<LESS-THAN SIGN;;SEMICOLON&&AMPERSAND""QUOTATION MARK##NUMBER SIGN★★BLACK STAR☆☆WHITE STAR✓✓CHECK MARK✗✗BALLOT X SPACE←←LEFTWARDS ARROW↑↑UPWARDS ARROW→→RIGHTWARDS ARROW↓↓DOWNWARDS ARROW€€EURO SIGN▽▽WHITE DOWN-POINTING TRIANGLE∑∑N-ARY SUMMATION№№NUMERO SIGN℗℗SOUND RECORDING COPYRIGHT

list tag ใช้ในการจัดข้อมูลเป็นชุดๆ หรือเป็นหัวข้อ 

ซึ่งจะทำให้ข้อมูลอ่านได้ง่ายขึ้น ซึ่ง list แบ่งได้เป็น 2 แบบด้วยกัน

1. list แบบไม่มีลำดับ
เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้

รูปแบบ list แบบไม่มีลำดับ

หัวข้อ
• ข้อมูล 1
• ข้อมูล 2

คลิกเพื่อทดลองเขียนด้วยตัวเอง

2. list แบบมีลำดับ
เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้

รูปแบบ list แบบมีลำดับ

หัวข้อ
1. ข้อมูล 1
2. ข้อมูล 2

คลิกเพื่อทดลองเขียนด้วยตัวเอง

3. การใส่สัญลักษณ์ให้กับ list
การใส่สัญลักษณ์ให้กับ list เราจะเห็นสัญลักษณ์หน้า list อยู่แล้วซึ่งสัญลักษณ์ตัวนั้นสามารถเปลี่ยนแปลงได้โดยใช้ Attibuet คำสั่ง type มีรายละเอียดดังนี้

สัญลักษณ์ที่ใช้กับแบบไม่มีลำดับ

TYPEสัญลักษณ์discวงกลมทึบcircleวงกลมโปร่งใสsquareสี่เหลี่ยมทึบ

สัญลักษณ์ที่ใช้กับแบบมีลำดับ

TYPEสัญลักษณ์Aเรียงแบบ A,B,Caเรียงแบบ a,b,cIเรียงแบบเลขโรมัน I,II,IIIiเรียงแบบเลขโรมัน i,ii,iii

คลิกเพื่อทดลองเขียนด้วยตัวเอง

4. การใช้ list ซ้อน list
ในตัวอย่างจะเป็นการทำ list ซ้อน list ซึ่ง html จะเปลี่ยนสัญลักษณ์ให้อัตโนมัติ

คลิกเพื่อทดลองเขียนด้วยตัวเอง

5. list แบบให้คำจำกัดความ
Definition list เป็น list ที่ใช้กับการให้คำจำกัดความ ดังตัวอย่าง

คลิกเพื่อทดลองเขียนด้วยตัวเอง

list เป็นคำสั่งที่ใช้สำหรับการแสดงข้อมูลเป็นชุดๆ ซึ่งจะสะดวกและ อ่านข้อมูลได้ง่าย เป็นทางเลือกทางหนึ่งที่ดีในการใช้แสดงบทความ