ในกรณีที่เราต้องการที่จะจัดรูปหรือข้อความที่อยู่มีแท็ก <div> คลอบอยู่นั้นเราไม่สามารถที่จะใช้คำว่า center ให้มันอยู่กึ่งกลางได้แต่ใน css ช่วยให้เราสามารถที่จะจัดรูปหรือข้อความที่มีแท็ก <div> คลอบอยู่ได้โดยใช้คำสั่ง margins ในการจัดได้
ตัวอย่างต้องการที่จะจัดรูปภาพให้อยู่ห่างจากขอบจอ 100px และด้านบนรูปห่างจากขอบ 100px เช่นเดียวกัน
รูปภาพตัวอย่างที่ต้องการจัด โค้ด
โค้ด: เลือกทั้งหมด
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<img src="img/animalia-3208412_960_720.jpg" alt="" width="500" />
</div>
</div>
</div>
</body>
</html>
- 1.เข้าไปในไฟล์ css แล้วสร้าง class มา 1 คลาส ดังโค้ด
2.จากนั้นเพิ่มคำสั่งไปใน Class นั้น
โค้ด: เลือกทั้งหมด
.margintest{ ......คำสั่ง css...... }
คำอธิบายโค้ดโค้ด: เลือกทั้งหมด
.margintest{ margin-left: 100px; margin-top: 100px; }
- margin-left คือการจัดให้ข้อมูลที่อยู่ในแท็ก <div> ที่อยู่ซ้ายมือห่างจากจอ 100px
margin-top คือการจัดให้ด้านบนห่างจากจอ 100px
4.ผลลัพธ์ที่ได้ดังรูปโค้ด: เลือกทั้งหมด
<html> <head> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container-fluid"> <div class="row margintest"> <div class="col-lg-12"> <img src="img/animalia-3208412_960_720.jpg" alt="" width="500" /> </div> </div> </div> </body> </html>
- margin-left คือการจัดให้ข้อมูลที่อยู่ในแท็ก <div> ที่อยู่ซ้ายมือห่างจากจอ 100px
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css