หน้า 1 จากทั้งหมด 1

การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

โพสต์แล้ว: 28/06/2018 5:33 pm
โดย Parichat
การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

ในกรณีที่เราต้องการที่จะจัดรูปหรือข้อความที่อยู่มีแท็ก <div> คลอบอยู่นั้นเราไม่สามารถที่จะใช้คำว่า center ให้มันอยู่กึ่งกลางได้แต่ใน css ช่วยให้เราสามารถที่จะจัดรูปหรือข้อความที่มีแท็ก <div> คลอบอยู่ได้โดยใช้คำสั่ง margins ในการจัดได้

ตัวอย่างต้องการที่จะจัดรูปภาพให้อยู่ห่างจากขอบจอ 100px และด้านบนรูปห่างจากขอบ 100px เช่นเดียวกัน
รูปภาพตัวอย่างที่ต้องการจัด
p3.jpg
p3.jpg (37.2 KiB) Viewed 1032 times
โค้ด

โค้ด: เลือกทั้งหมด

<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 คลาส ดังโค้ด

    โค้ด: เลือกทั้งหมด

    .margintest{
    	......คำสั่ง css......
    }
    
    2.จากนั้นเพิ่มคำสั่งไปใน Class นั้น

    โค้ด: เลือกทั้งหมด

    .margintest{
    	margin-left: 100px;
    	margin-top: 100px;
    }
    
    คำอธิบายโค้ด
    • margin-left คือการจัดให้ข้อมูลที่อยู่ในแท็ก <div> ที่อยู่ซ้ายมือห่างจากจอ 100px
      margin-top คือการจัดให้ด้านบนห่างจากจอ 100px
    3.จากนั้นนำชื่อ class ไปใส่ใน class ของแท็ก <div> ดังโค้ด

    โค้ด: เลือกทั้งหมด

    <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>
    4.ผลลัพธ์ที่ได้ดังรูป
    p4.jpeg
    p4.jpeg (14.33 KiB) Viewed 1032 times
นอกจากนี้ก็ยังมีอีกไม่ว่าจะจัดฝั่งขวาให้ห่างจากจอก็ทำได้โดยใช้คำสั่ง margin-right และยังสามารถกำหนดให้ห่างจากขอบจอด้านล่างก็ได้โดยใช้คำสั่ง margin-bottom คำสั่งนี้เหมาะในการใช้จัดข้อมูลที่มีแท็ก <div>คล่อมอยู่

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css