VN-Lives: Làm thế nào để thẻ div nằm giữa màn hình trình duyệt web?

Trong vài trường hợp thiết kế giao diện website, bạn cần trình bày vị trí của mộ thẻ DIV nằm ngay giữa nàm hình trình duyệt web, như trang login, trang đăng ký, bảng thông báo....

Dưới đây là mã nguồn CSS đơn giản để thực hiện việc gán vị trí thẻ div của bạn ở giữa màn hình trình duyệt web.

#mydiv {
    top: 50%;
    left: 50%;
    width:26em;
    height:10em;
    margin-top: -5em; /*set to a negative number 1/2 of your height*/
    margin-left: -13em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position:fixed;
    text-align:center;
}

Tiếp theo bạn chỉ việc add ID Nam là "mydiv" và thẻ div bạn muốn cảnh giữa.

<div id="mydiv">
http://bnson.blogspot.com/ 
</div>

Bạn có thể xem demo tại http://jsfiddle.net/bnson/se72y3g9/4/

Dưới đây là toàn bộ mã nguồn demo.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>http://bnson.blogspot.com/</title>

<style type='text/css'>
 #mydiv {
 top: 50%;
 left: 50%;
 width:26em;
 height:10em;
 margin-top: -5em; /*set to a negative number 1/2 of your height*/
 margin-left: -13em; /*set to a negative number 1/2 of your width*/
 border: 1px solid #ccc;
 background-color: #f3f3f3;
 position:fixed;
 text-align:center;
 }
</style>

<script type='text/javascript'>//<![CDATA[
 window.onload=function(){

}//]]>

</script>

</head>
<body>
 <div id="mydiv">
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 </div>
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 
 http://bnson.blogspot.com/ 

</body>
</html>

Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hãy phản hồi tại đây.

VN-Lives

Làm thế nào để thẻ div nằm giữa màn hình trình duyệt web?

No comments:

Post a Comment