กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • div ให้อยู่กี่งกลาง

    September 7, 2018
    <style type="text/css">
.center_div {
	margin:auto;
	width:90%;
	background-color:#00CCFF;
}
</style>
<div class="center_div">

</div>

    CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง

    โค๊ด: [Select]

    [css]
    #box{
    width:200px;
    height:100px;
    position:fixed;
    top:50%;
    left:50%;
    }
    [/css]
     

    โค๊ด: [Select]

    [css]
    #box{
    width:200px;
    height:100px;
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-50px;
    }
    [/css]
     

    http://rabbitinblack.com/2011/10/css-middle/

    div กับหน้าจอ กว้าง x ยาว เท่าไหร่ก็อยู่กลางหน้า

    โค๊ด: [Select]

    .center {
    float:none;
    margin:0 auto;
    position:absolute;
    }

    หรือถ้าไม่กลางจิงๆต้องแบบนี้แน่นอน

    .center {
    width:300px; /* จำเป็นต้องกำหนดความกว้างให้คงที่ */
    position:absolute;
    left:50%; /* ด้านซ้ายครึ่งจอ */
    margin-left:-150px; /*margin-left ติดลบครึ่งหนึ่งของความกว้าง */
    }

    div แสดงผลกลางจอ – แนวตั้ง

    โค๊ด: [Select]

    .vertically{
    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-75px 0 0 -135px;
    }

    หาก เป็น div ซ้อน div ให้เปลี่ยนจาก position : absolute; เป็น position : relative;

    แต่หากไม่ต้องการกำหนดความสูง ก็จำเป็นจะต้องเอา jQuery เข้ามาช่วย
    div แสดงผลกลางจอ – แนวตั้ง
    การจะให้ div แสดงผลกลางหน้าจอในแนวตั้ง โดยไม่ต้องกำหนดความสูง (Height) ต้องเอา jQuery เข้ามาช่วย
    ดังนี้

    โค๊ด: [Select]


    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

    $(window).resize(function(){

    $('.className').css({
    position:'absolute',
    left: ($(window).width() - $('.className').outerWidth())/2,
    top: ($(window).height() - $('.className').outerHeight())/2
    });

    });
    // To initially run the function:
    $(window).resize();

    });
    </script>
    <body>
    <div class="classname"></div>
    </body>

    อื่นๆ
    http://www.codingbasic.com/style/example/007/center.html

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories