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="http://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:

Download file để thực hành

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="http://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>

Hiển thị trình duyệt:

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *