Việc canh giữa các phần tử trong website thì thật sự không khó nhưng do có quá nhiều cách để thực hiện nên nhiều khi sẽ làm bạn bị rối(không biết nên sử dụng cách nào cho hợp lý). Do đó Ngày hôm nay mình sẽ giới thiệu đến bạn tất cả các cách để có thể canh giữa các phần tử HTML trong trường hợp cụ thể thông qua việc sử dụng các thuộc tính trong CSS nhé!
Căn Giữa Theo Chiều Ngang
Sử dụng text-align
Đối với thuộc tính text-align thì chúng ta có thể dùng để căn giữa cho các inline element(như là nội dung, đường dẫn...). Và để hiểu rõ hơn bạn xem đoạn mã sau nhé:
HTML
<!--Niềm Vui Lập Trình-->
<!--Căn Giữa Nội Dung Văn Bản-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et vehicula lorem, nec consectetur sapien. Integer at eros sapien. Phasellus luctus, diam eu iaculis porta.
</p>
<!--Căn Giữa Đường Dẫn Văn Bản-->
<div class="duong_dan">
<a href="#">Đường dẫn 1</a>
<a href="#">Đường dẫn 2</a>
</div>
CSS
p, .duong_dan {
text-align: center;
background: DodgerBlue;
margin: 20px 0;
padding: 10px;
color: #fff;
}
.duong_dan a {
text-decoration: none;
background: #333;
border-radius: 5px;
color: white;
padding: 6px 8px;
}
Và kết quả bạn xem Codepen bên dưới nhé:
See the Pen căn giữa bằng text-align by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử dụng margin auto
Thuộc tính này thường được sử dụng cho các phần tử block-element và được thực hiện bằng cách xác định thuộc tính auto cho lề trái và lề phải của đối tượng. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:
HTML
<!--Niềm Vui Lập Trình-->
<!--Căn Giữa Phần tử-->
<div class="container">
<div class="child">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et vehicula lorem, nec consectetur sapien. Integer at eros sapien. Phasellus luctus, diam eu iaculis porta. </p>
</div>
</div>
CSS
.container {
background: #333;
margin: 20px 0;
padding: 10px;
}
.child {
margin: 0 auto;
width: 200px;
background: DodgerBlue;
padding: 20px;
color: white;
border-radius: 15px;
}
Và kết quả bạn xem bên dưới đây nhé:
See the Pen Sử dụng margin auto by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử dụng justify-content
Cách tiếp theo để căn giữa phần tử là chúng ta sẽ dùng hai thuộc tính là display: flex và justify-content. Để hiểu rõ hơn bạn xem ví dụ sau nhé:
HTML
<!--Niềm Vui Lập Trình-->
<!--Căn Giữa Phần tử-->
<div class="container">
<div class="child">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et vehicula lorem, nec consectetur sapien. Integer at eros sapien. Phasellus luctus, diam eu iaculis porta. </p>
</div>
</div>
CSS
.container {
background: #333;
margin: 20px 0;
padding: 10px;
/*Sử dụng hai thuộc tính bên dưới để căn giữa nhé*/
display: flex;
justify-content: center;
}
.child {
width: 200px;
background: DodgerBlue;
padding: 20px;
color: white;
border-radius: 15px;
}
Và kết quả bạn xem Codepen bên dưới nhé:
See the Pen sử dụng justify-content trong grid by haycuoilennao19 (@haycuoilennao19) on CodePen.
Căn Giữa Theo Chiều Dọc
Sử dụng position
Trong phần này chúng ta sẽ sử dụng thuộc tính position:relative cho thẻ div cha(nơi chứa phần tử con ta muốn căn giữa).
Sau đó ta sẽ sử dụng thuộc tính position: absolute và một số thuộc tính khác để có thể thực hiện canh giữa cho thẻ div con bằng đoạn code sau nhé:
HTML
<!--Niềm Vui Lập Trình-->
<!--Căn Giữa Phần tử bằng position-->
<div class="container">
<div class="child">
<p>
Lorem ipsum dolor sit amet....
</p>
</div>
</div>
CSS
.container {
background: #333;
margin: 20px 0;
padding: 100px;
position: relative
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 400px;
background: DodgerBlue;
padding: 10px;
color: white;
border-radius: 15px;
}
Và kết quả bạn xem bên dưới nha:
See the Pen XWjMLVz by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử dụng flex box
Trong phần này chúng ta sẽ sử dụng hai thuộc tính là display: flex; và align-items: center; để căn giữa phần tử theo chiều dọc nhé!
HTML
<!--Niềm Vui Lập Trình-->
<!--Căn Giữa Phần tử bằng position-->
<div class="container">
<div class="child">
<p>
Lorem ipsum dolor sit amet....
</p>
</div>
</div>
CSS
.container {
background: #333;
margin: 20px 0;
padding: 100px 0px;
height: 300px;
display: flex;
align-items: center;
}
.child {
width: 400px;
background: DodgerBlue;
padding: 10px;
color: white;
border-radius: 15px;
}
Và kết quả bạn xem bên dưới nha:
See the Pen zYKZVjR by haycuoilennao19 (@haycuoilennao19) on CodePen.
Căn Giữa Theo Cả Chiều Ngang Và Chiều Dọc
Sử dụng flex
Bây giờ chúng ta sẽ sử dụng thuộc tính flex để căn giữa phần tử theo chiều dọc, chiều ngang thông qua đoạn mã bên dưới nhé!
HTML
<!--Niềm Vui Lập Trình-->
<!--Căn Giữa Phần tử bằng position-->
<div class="container">
<div class="child">
<p>
Lorem ipsum dolor sit amet....
</p>
</div>
</div>
CSS
.container {
background: #333;
margin: 20px 0;
padding: 100px 0px;
height: 200px;
display: flex;
justify-content: center;
align-content: center;
}
.child {
width: 400px;
background: DodgerBlue;
padding: 10px;
color: white;
border-radius: 15px;
}
Và kết quả cuối cùng bạn xem bên dưới nhé:
See the Pen LYRWKMM by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử dụng position
Cách tiếp theo chúng ta sẽ sử dụng thuộc tính position để căn giữa phần tử theo cả hai chiều trong website nhé!
HTML
<!--Niềm Vui Lập Trình-->
<!--Căn Giữa Phần tử bằng position-->
<div class="container">
<div class="child">
<p>
Lorem ipsum dolor sit amet....
</p>
</div>
</div>
CSS
.container {
background: #333;
margin: 20px 0;
padding: 100px 0px;
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: DodgerBlue;
padding: 10px;
color: white;
border-radius: 15px;
}
Và kết quả cuối cùng bạn xem bên dưới nhé:
See the Pen căn giữa phần tử bằng position by haycuoilennao19 (@haycuoilennao19) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những cách để cab8 giữa phần tử hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!