Kết nối

Cách căn giữa phần tử trong CSS

226 lượt xem 
 
Thể loại: CSS/CSS3, Thiết kế Web 

Khi xây dựng và thiết kế giao diện Web, vấn đề mà nhiều lập trình viên thường gặp là làm cách nào để canh giữa một đoạn văn bản, hình ảnh,… ở một vùng giao diện nào đó. Việc này trông có vẻ đơn giản, tuy nhiên trên thực tế lại có nhiều trường hợp khá phức tạp, vì vậy bài viết này sẽ liệt kê một số các cách đơn giản mà hiệu quả giúp bạn canh giữa phần tử HTML bằng CSS.

Canh giữa theo chiều ngang

Canh giữa nội dung trang web hoặc các phần tử block

Nếu bạn không dùng Bootstrap hay bất kỳ framework nào để xây dựng giao diện thì việc canh giữa toàn bộ bố cục trang theo kích thước trình duyệt không hề dễ. Cách tốt nhất là bạn dùng thuộc tính margin với kích thước 0 auto ở thẻ body hoặc phần tử div bao hết giao diện web và quan trọng phải đặt kích thước width cho vùng div bao này.

Sau đây là ví dụ một giao diện trang web có kích thước vùng div tên là “wrap” là 1000px được canh giữa.

<!DOCTYPE html>
<html>
<head>
	<title>Căn giữa bố cục --- DAMMIO.COM</title>
	<style>
	body
	{
		margin: 0 auto; /* chỉnh lề giao diện tự động */
	}
	.wrap
	{
		margin: 0 auto; /* chỉnh lề giao diện tự động */
		width: 1000px; /* phải đặt kích thước giao diện cho trang */
		background-color:lightblue;
	}
	</style>
</head> 

<body>
<div class="wrap">
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
</div>
</body>

</html>

Cách này bạn cũng có thể sử dụng để canh giữa một phần tử block (div, p, h1->h6, ul, li,…). Để canh giữa bạn chỉ cần thêm thuộc tính CSS margin:0 auto; là được. Lưu ý một số trường hợp cần có độ rộng width thì nội dung mới có thể canh giữa.

<html>
<head><title>Nội dung canh giữa --- DAMMIO.COM</title></head>

<style>
.noidung { margin: 0 auto; }
</style>

<body>
<div class="noidung">Nội dung cần canh giữa</div>
</body>

</html>

Canh giữa văn bản bất kỳ

Nếu bạn chỉ muốn văn bản hiển thị ở giữa vùng văn bản nào đó, bạn có thể dùng thuộc tính text-align:center trong CSS. Chẳng hạn, ví dụ sau canh giữa dòng đầu tiên nằm trong lớp .noidung sau đây.

<!DOCTYPE html>
<html>
<head>
	<title>Căn giữa bố cục --- DAMMIO.COM</title>
	<style>
	body
	{
		margin: 0 auto; /* chỉnh lề giao diện tự động */
	}
	.wrap
	{
		margin: 0 auto; /* chỉnh lề giao diện tự động */
		width: 1000px; /* phải đặt kích thước giao diện cho trang */
		background-color:lightblue;
	}
	
	.content
	{
		text-align:center;
	}
	
	</style>
</head> 

<body>
<div class="wrap">

	<div class="content">Nội dung trang web ở đây --- dammio.com</div>
	<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
</div>
</body>

</html>

Canh giữa dùng Flexbox

Bạn cũng có thể dùng FlexBox, một module bố cục giao diện cho phép bạn thiết kế cách cấu trúc bố cục web mà không cần phải dùng thuộc tính float hay position. Khi đó bạn chỉ cần thêm 2 thuộc tính display: flex; và justify-content: center; trong CSS.

Canh giữa dùng Flexbox.

<!DOCTYPE html>
<html>
<head>
	<title>Căn giữa bố cục --- DAMMIO.COM</title>
	<style>
	body
	{
		display: flex;
		justify-content: center;
	}
	.wrap
	{
		display: flex;
		justify-content: center;
		background-color:yellow;
		width:1000px;
	}
	</style>
</head> 

<body>
<div class="wrap">
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
</div>
</body>

</html>

Canh giữa theo chiều dọc

Dùng thuộc position, top và transform

Bạn có 1 vùng div và bạn muốn nội dung canh giữa theo chiều dọc chứ không phải chiều ngang. Vậy cách làm thế nào? Bạn 2 dùng 2 vùng div, vùng 1 đặt vị trí position: relative;, còn vùng 2 chứa một số phong cách CSS như ví dụ sau. Cách này cho phép bạn canh giữa bất kỳ trường hợp nào mà không cần biết chiều cao của vùng bao.

<!DOCTYPE html>
<html>
<head>
	<title>Căn giữa bố cục --- DAMMIO.COM</title>
	<style>
	body
	{
		margin: 0 auto;
	}
	.wrap
	{
		margin: 0 auto;
		width:1000px;
		height:300px;
		background-color:yellow;
		position: relative;
		
	}
	.noidung
	{ 
		position: absolute;
		top: 50%;
		transform: translateY(-50%); // dịch vị trí về 50%
	}
	</style>
</head> 

<body>
<div class="wrap">
	<div class="noidung">
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	</div>
</div>
</body>

</html>

Chuyển về dạng bảng table, cell

Ngoài cách căn giữa theo chiều dọc ở trên, bạn cũng có thể canh giữa bằng cách chuyển hóa các vùng về dạng table và table-cell như sau. Kết quả cũng tương tự như ở trên.

<!DOCTYPE html>
<html>
<head>
	<title>Căn giữa bố cục --- DAMMIO.COM</title>
	<style>
	body
	{
		margin: 0 auto;
	}
	.wrap
	{
		margin: 0 auto;
		width:1000px;
		height:300px;
		background-color:yellow;
		
		display: table;
	}
	.noidung
	{ 
		display: table-cell;
		vertical-align: middle;
	}
	</style>
</head> 

<body>
<div class="wrap">
	<div class="noidung">
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	</div>
</div>
</body>

</html>

Canh giữa theo chiều ngang, chiều dọc

Bạn có thể kết hợp các cách ở trên để có thể canh giữa theo chiều ngang lẫn chiều dọc.

Dùng Flexbox

Bạn có thể dùng các thuộc tính Flexbox để canh giữa nội dung như sau. Có lẽ đây là cách đơn giản và gọn nhất.

<!DOCTYPE html>
<html>
<head>
	<title>Căn giữa bố cục --- DAMMIO.COM</title>
	<style>
	body
	{
		margin: 0 auto;
	}
	.wrap
	{
		margin: 0 auto;
		width:1000px;
		height:300px;
		background-color:yellow;
		
		display: flex; /* Canh giữa bằng flex */
		justify-content: center;
		align-items: center;
	}

	</style>
</head> 

<body>
<div class="wrap">
	<div class="noidung">
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	</div>
</div>
</body>

</html>

Dùng position. top, left và transform

Nếu không thích dùng Flexbox, bạn có thể dùng 1 số thuộc tính thông thường kết hợp với thuộc tính transform để dịch nội dung đến vùng bạn muốn hiển thị ở giữa. Kết quả cũng tương tự như trên.

<!DOCTYPE html>
<html>
<head>
	<title>Căn giữa bố cục --- DAMMIO.COM</title>
	<style>
	body
	{
		margin: 0 auto;
	}
	.wrap
	{
		margin: 0 auto;
		width:1000px;
		height:300px;
		background-color:yellow;
		position: relative; /* Canh giữa */
	}
	
	.noidung
	{
		position: absolute; /* Canh giữa */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	</style>
</head> 

<body>
<div class="wrap">
	<div class="noidung">
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	Nội dung trang web ở đây --- dammio.com<br/>
	</div>
</div>
</body>

</html>

Ngoài ra còn 1 số cách khác nữa để canh giữa nội dung, phần tử trong HTML thông qua các thuộc tính CSS. Tuy nhiên, với chừng này phương pháp trong bài cũng đủ để bạn áp dụng để thiết kế giao diện cho website. Chúng tôi chúc bạn thành công!

Bình luận Facebook

Để lại bình luận

avatar
1000
  Theo dõi  
Thông báo của