รับทําเว็บไซต์ รับทําseo
 
รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

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

    เราสามารถประยุกต์ property สองสามตัวร่วมกัน เพื่อช่วยจัดตำแหน่งดังกล่าวได้ โดยสร้างคลาสคลุมวัตถุที่ต้องการและกำหนดให้บล็อกเป็นตาราง ซึ่งสามารถใช้สมบัติของตารางที่สามารถจัดวัตถุไว้กึ่งกลางเอกสารแนวตั้งได้

     

    หลักการเขียนก็ไม่ยากครับ ใช้ภาษา CSS ง่ายๆ

    โดยคุณสมบัติที่สำคัญสำหรับการจัดข้อความให้อยู่ตรงกลางแบบนี้มีดังต่อไปนี้ครับ

     

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

     

    ลองมาดูโค้ดกันดีกว่า

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>

    <div style="width:300px; height:300px;background-color:#00CC00; display:table;">
        <div style="background-color:#990000; display:table-cell;  vertical-align:middle; ">
            <p>
            xxxxxxxxxxxxxx
            </p>
        </div>
    </div>

    </body>
    </html>

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com