Canh giữa thành phần con

Trở về

  • 2,512

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:

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.