การจัดรูปภาพและข้อความให้อยู่ตรงกลางด้วย CSS
06 May 2012
ในปัจจุบันเรานิยมใช้ CSS ในการจัดการแสดงผล และบ่อยครั้งที่เราต้องการจัดรูปภาพหรือข้อความให้อยู่ตรงกลางของพื้นที่การแสดงผลนั้นไม่ว่าจะเป็นแนวตั้งหรือแนวนอน แต่ทว่าโดยค่าตั้งต้นแล้วรูปภาพหรือข้อความมันไม่ได้แสดงอยู่ตรงกลางตั้งแต่เริ่มต้น ในบทความนี้ผมจะเขียนถึงเทคนิคที่จะทำให้มันอยู่ตรงกลางไม่ว่าจะเป็นรูปภาพ,ข้อความ,หรือ Elements ชนิดอื่นๆ
เตรียมความพร้อม
ก่อนอื่นเลยเรามาเตรียมโค้ด HTML กันก่อนโดยมีเพียงแค่หัวข้อ (<h1>) และรูปภาพ (<img>) ดังนี้:
<html>
<head>
<title>Centre Things</title>
<style>
#img_container{
border: 1px solid grey;
height: 250px;
}
#img_container img{
height: 100px;
}
</style>
</head>
<body>
<h1>How to Centre Things with CSS</h1>
<div id="img_container">
<img src="pics/coffee_cup.png" />
</div>
</body>
</html>
ตัวอย่างข้างต้นเรามีการจัดวาง Style ให้แสดงกรอบของแท็ก <div> เพื่อให้เห็นขอบเขตและง่ายต่อการเรียนรู้ อีกทั้งยังมีการกำหนดความสูงไว้ด้วย มิเช่นนั้นแท็ก <div> จะมีความสูงเท่ากับรูปภาพโดยอัตโนมัติ รูปที่ 1 แสดงให้เห็นผลลัพธ์ซึ่งจะเห็นได้ว่ารูปมันไม่อยู่ตรงกลางแต่มันอยู่ติดขอบบนซ้ายเห็นไหมครับ
การจัดรูปให้อยู่ตรงกลางในแนวนอน
เอาหล่ะทีนี้เรามาจัดมันให้อยู่ตรงกลางกัน เทคนิคที่ใช้ก็คือการจัด margin ซ้ายขวา หากเราจัด margin-left ให้มันเขยิบออกมา 20px รูปก็จะขยับออกมาจากมุมซ้าย 20 pixels ไม่ยากใช่ไหมครับ แต่เราจะเซ็ทค่าเป็นเท่าไหร่ดีมันถึงจะอยู่ตรงกลางหล่ะ? ต้องไม่ลืมว่าเราอาจย่อขยายขนาดเว็บเบราว์เซอร์ได้ด้วยนะ!!! คำตอบก็คือให้มันเป็น auto คือให้เว็บเบราว์เซอร์คำนวณให้อัตโนมัติดังนี้
#img_container img{
height: 100px;
margin: auto auto;
}แต่เดี๋ยวก่อนทำไมมันถึงยังไม่อยู่ตรงกลางหล่ะ!!! ทั้งนี้เราต้องเข้าใจธรรมชาติของ HTML เพิ่มเติมเสียก่อน แท็กใน HTML แบ่งตามการแสดงผลออกเป็นสองประเภทหลักๆคือ
- แบบ Inline
- กับแบบ Block
แบบ Inline คือเมื่อแสดงผลแท็กนั้นแล้ว สามารถแสดงผลแท็กถัดไปต่อท้ายได้ทันที เช่น แท็ก <img> เป็นต้น ส่วนแบบ Block คือเมื่อแสดงผลแท็กนั้นแล้วจะขึ้นบรรทัดใหม่เพื่อแสดงผลแท็กถัดไปเสมอ เช่น แท็ก <h1> เป็นต้น
ดังนั้นการเซ็ท margin: auto auto ให้กับแท็ก <img> จึงไม่เกิดผล (เพราะมันต้องสามารถแสดงแท็กอื่นต่อท้ายได้เลย) วิธีแก้ก็คือทำให้แท็ก <img> แสดงผลเป็นแบบ Block ซะก็จบ :) ดังนี้:
#img_container img{
height: 100px;
margin: auto auto;
display: block;
}แค่นี้รูปก็อยู่ตรงกลางได้แล้วดังแสดงในรูปที่ 2
การจัดรูปให้อยู่ตรงกลางในแนวดิ่ง
อย่างไรก็ตามรูปของเรายังคงอยู่ติดขอบบนอยู่ หากอยากทำให้มันอยู่ตรงกลางในแนวดิ่งด้วยก็ต้องเรียนรู้เพิ่มเติมอีกนิดหน่อยนะ ใน CSS มีสไตล์พร็อพเพอร์ตี้อยู่ตัวหนึ่งชื่อ vertical-align ซึ่งจากชื่อก็คงเดาได้ว่าเอาไว้จัดตำแหน่งในแนวดิ่งนั่นเอง A-Ha งั้นลองเลยแล้วกันดังนี้:
#img_container{
border: 1px solid grey;
height: 250px;
vertical-align: middle;
}
แต่ว่ามันไม่ได้ผลหรอกครับ ถ้าคุณไม่เข้าใจธรรมชาติของพร็อพเพอร์ตี้ตัวนี้ (อีกแล้ว) พร็อพเพอร์ตี้นี้จำลองมาจาก HTML แท็ก <td valign=""> หรือ Cell ภายในตาราง ดังนั้นถ้าเราไม่เปลี่ยนโหมดการแสดงผลของแท็ก <div> ให้เหมือนกับ Cell ในตาราง พร็อพเพอร์ตี้ vertical-align ก็ไม่ทำงานนั่นเอง เพราะฉะนั้นก็ลงมือเปลี่ยนกันได้เลยดังนี้:
#img_container{
border: 1px solid grey;
height: 250px;
width: 500px;
display: table-cell;
vertical-align: middle;
}
และโปรดสังเกตด้วยว่ามีการเซ็ทค่าความกว้างให้กับแท็ก <div> ด้วยเพราะเมื่อมันแสดงผลเป็น Cell ตารางแล้ว ความกว้างจะตามขนาดสิ่งที่อยู่ภายใน Cell ครับ เท่านี้เราก็ได้รูปที่อยู่ตรงกลางทั้งแนวนอนและแนวดิ่งแล้ว :> ตัวอย่างที่ 2 แสดงโค้ดรวมทั้งหมดและรูปที่ 3 แสดงผลของการรัน
<html>
<head>
<title>Centre Things</title>
<style>
#img_container{
border: 1px solid grey;
height: 250px;
width: 500px;
display: table-cell;
vertical-align: middle;
}
#img_container img{
height: 100px;
margin: auto auto;
display: block;
}
</style>
</head>
<body>
<h1>How to Centre Things with CSS</h1>
<div id="img_container">
<img src="pics/coffee_cup.png" />
</div>
</body>
</html>
การจัดข้อความให้อยู่ตรงกลาง
ทีนี้มาดูการจัดข้อความให้อยู่ตรงกลางบ้างนะ ดูมันก็ไม่น่าจะยากแล้วใช่มั๊ยครับ ก็แค่เซ็ท margin: auto auto เหมือนเดิม งั้นลองกับแท็ก <h1> ดูแล้วกันดังนี้:
h1{
margin: auto auto;
}
ลองแล้วเป็นยังไงบ้างครับ? ทำไมมันไม่ได้อย่างที่คิดหล่ะ !?! ลองตีกรอบ border: 2px solid orange ให้กับแท็ก <h1> ดูจะรู้เลยว่ามันกินพื้นที่ความกว้างทั้งหมดของหน้าจอ ดังนั้นการเซ็ท Margin เป็น Auto จึงไม่ได้ผล ถ้าเช่นนั้นเราก็ต้องกำหนดความกว้างของแท็ก <div> แต่จะคำนวณอย่างไรดีให้พอดีกับข้อความ? อันที่จริงแล้วการเซ็ทข้อความให้อยู่ตรงกลางไม่ได้ยุ่งยากขนาดนั้น แต่เราต้องใช้เทคนิคอื่น ใน CSS เรามีพร็อพเพอร์ตี้ text-align อยู่สำหรับกรณีนี้อยู่แล้วครับ :p โดยประยุกต์ใช้ได้ดังนี้:
h1{
border: 2px solid orange
text-align: center;
}
ตัวอย่างที่ 3 แสดงโค้ดรวมทั้งหมดและรูปที่ 4 แสดงผลของการรัน
<html>
<head>
<title>Centre Things</title>
<style>
h1{
border: 2px dashed orange;
text-align: center;
}
#img_container{
border: 1px solid grey;
height: 250px;
width: 500px;
display: table-cell;
vertical-align: middle;
}
#img_container img{
height: 100px;
margin: auto auto;
display: block;
}
</style>
</head>
<body>
<h1>How to Centre Things with CSS</h1>
<div id="img_container">
<img src="pics/coffee_cup.png" />
</div>
</body>
</html>
การจัด Elements อื่นๆให้อยู่ตรงกลาง
อ่านมาถึงตรงนี้คุณคงได้ไอเดียการจัดสิ่งๆต่างๆให้อยู่ตรงกลางแล้วนะครับ คือต้องไม่ใช่การแสดงผลแบบ Inline และ Elements นั้นๆต้องมีขนาดความกว้างไม่เต็มพื้นที่ความกว้างของเว็บเบราว์เซอร์ จึงจะสามารถแสดงผลให้อยู่ตรงกลางในแนวนอนได้ ดังนั้นสำหรับแท็ก <table> เราจึงเซ็ท margin: auto auto ได้เลย เพราะตารางจะมีความกว้างเท่ากับสิ่งที่อยู่ภายในตารางโดยอัตโนมัติ แล้วถ้าเราต้องการจัด body ให้อยู่ตรงกลางบ้างหล่ะ? ลองหาคำตอบดูนะครับ
