การจัดภาพให้อยู่กึ่งกลางด้วย css

การจัดกึ่งกลาง Div ที่มีภาพ หรือข้อความ ให้อยู่กลางหน้าเว็บ โดยใช้ css ทำความปวดหัวให้อยู่ตั้งนาน ค้นหาในเว็บ และลองทำหลายอย่างก็ไม่ประสบผลสำเร็จ จนกระทั่งไปพบที่ experts-exchange.com อธิบายไว้ง่ายดี และใช้ได้

วิธีที่ง่ายที่สุดคือการใช้ div ซ้อนกัน 2 div โดย div แรก จัดให้ text-align เป็น center และในส่วน div ที่ 2 ให้จัด text-align เป็น left และกำหนดความกว้างของภาพ หรือของ div ที่อยู่ข้างใน

ตัวอย่างโค้ดที่สามารถนำไปใช้ได้ คือ
<p>แสดงตัวอย่างการจัดภาพอยู่กึงกลางหน้า โดยใช้ Div ของ CSS
<div style=”text-align:center”><div style=”text-align:left; width=510px;”> <img src=”images2007/officeBtn_click.png”> </div><div>ข้อความใต้ภาพ
</p>

ภาพที่ได้ ดังนี้

ตัวอย่างการจัดกึ่งกลาง div

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: