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

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

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


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

http://upic.me/i/3i/css-11.jpg


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

http://upic.me/i/az/ua333.jpg

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

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

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

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

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

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

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

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

.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 เข้ามาช่วย
ดังนี้



<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>

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