Canh giữa thành phần con
Việc canh giữa thành phần con theo chiều dọc và cả theo chiều ngang bằng CSS trở nên phức tạp, với jQuery bạn có thể thực hiện dễ dàng hơn với cách dùng đơn giản hơn.
Thành phần canh giữa thành phần cha theo chiều dọc và ngang
Sử dụng một vài đoạn code cơ bản để di chuyển thành phần vào trung tâm của thành phần cha.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var tagDiv = $(".box");
var tagP = $("p");
var top = ( tagDiv.height() - tagP.height() ) / 2;
var left = ( tagDiv.width() - tagP.width() ) / 2;
tagP.css({"position": "absolute",
"top": top,
"left": left});
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
div {
border: 1px solid #c00;
height: 200px;
width: 200px;
}
p {
background-color: #ccc;
width: 50px;
}
</style>
</head>
<body>
<div class="box">
<p>text</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
Sử dụng cho nhiều thành phần
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("li").each(function(){
var tagLi = $(this);
var tagP = tagLi.find(".child");
var top = ( tagLi.height() - tagP.height() ) / 2;
var left = ( tagLi.width() - tagP.width() ) / 2;
tagP.css({"position": "absolute",
"top": top,
"left": left});
});
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
ul, li { list-style: none; }
li {
border: 1px solid #c00;
float: left;
margin-right: 10px;
position: relative;
}
.list01 {
height: 100px;
width: 100px;
}
.list02 {
height: 150px;
width: 150px;
}
.list03 {
height: 200px;
width: 200px;
}
.child {
background-color: #ccc;
width: 50px;
}
</style>
</head>
<body>
<ul>
<li class="list01">
<p class="child">01</p>
</li>
<li class="list02">
<p class="child">02</p>
</li>
<li class="list03">
<p class="child">03</p>
</li>
</ul>
</body>
</html>