Trong một vài thiết kế website bạn muốn vị trí của div được nằm tại vị trí top-center trên cửa sổ trình duyệt website. Ví dụ như header, menu, message, quảng cáo,... bài viết này sẽ hướng dẫn các bạn một cách cực kỳ đơn giản để thực hiện việc này.
Dưới đây là dòng code CSS để thực hiện nó.
Còn đây là mã CSS đơn giản của lớp(class) div canh ở vị trí top-center.
Bạn chỉ việc add class name vào thẻ div bạn muốn canh tại vị trí top-center:
Bạn có thể xem demo tại http://jsfiddle.net/bnson/k7s6gaet/2/
Dưới đây là full source code ví dụ hướng dẫn.
Nếu bạn có bất kỳ câu hỏi nào về bài viết này, xin vui lòng phản hồi tại đây.
Dưới đây là dòng code CSS để thực hiện nó.
margin: 0 auto;
Còn đây là mã CSS đơn giản của lớp(class) div canh ở vị trí top-center.
.centerDiv
{
width: 50%;
height:150px;
margin: 0 auto;
background-color:#FFA500;
text-align: center;
}
--
{
width: 50%;
height:150px;
margin: 0 auto;
background-color:#FFA500;
text-align: center;
}
--
Bạn chỉ việc add class name vào thẻ div bạn muốn canh tại vị trí top-center:
<div class="centerDiv">
http://bnson.blogspot.com/<br />
</div>
http://bnson.blogspot.com/<br />
</div>
Bạn có thể xem demo tại http://jsfiddle.net/bnson/k7s6gaet/2/
Dưới đây là full source code ví dụ hướng dẫn.
<!DOCTYPE html>
<html >
<head>
<title> http://bnson.blogspot.com/ </title>
<style type="text/css">
.centerDiv
{
width: 50%;
height:150px;
margin: 0 auto;
background-color:#FFA500;
text-align: center;
}
</style>
</head>
<body>
<div class="centerDiv">
http://bnson.blogspot.com/<br />
http://bnson.blogspot.com/<br />
http://bnson.blogspot.com/<br />
http://bnson.blogspot.com/<br />
http://bnson.blogspot.com/<br />
</div>
</body>
</html>
<html >
<head>
<title> http://bnson.blogspot.com/ </title>
<style type="text/css">
.centerDiv
{
width: 50%;
height:150px;
margin: 0 auto;
background-color:#FFA500;
text-align: center;
}
</style>
</head>
<body>
<div class="centerDiv">
http://bnson.blogspot.com/<br />
http://bnson.blogspot.com/<br />
http://bnson.blogspot.com/<br />
http://bnson.blogspot.com/<br />
http://bnson.blogspot.com/<br />
</div>
</body>
</html>
Nếu bạn có bất kỳ câu hỏi nào về bài viết này, xin vui lòng phản hồi tại đây.
No comments:
Post a Comment