căn giữa css

By Admin 28/10/2023 0

Cách nhằm căn thân thuộc tất cả với CSS

Introduce

Nếu các bạn mới mẻ chỉ chính thức bên trên tuyến đường sự nghiệp coding, và như ý sao tôi lại đạt được sự xem xét của doanh nghiệp nhập vài ba phút…hãy lưu tức thì nội dung bài viết đó lại nhé!

Hãy trung thực cùng nhau nhé.

Bạn đang xem: căn giữa css

Đôi khi trải qua chuyện quãng đời coding, tất cả chúng ta chợt nhìn thấy nhiều khi vượt lên mệt rũ rời với việc căn thân thuộc tất cả (tìm cơ hội căn thân thuộc thẻ div ở trong một thẻ div không giống bên trên Google hoặc Stack Overflow).

Nó hoàn toàn có thể chỉ là một trong việc giản đơn, tuy nhiên lại nhanh gọn trở nên nỗi mệt rũ rời khi chúng ta tăng nhiều thành phần hoặc format cho tới trang của tớ.

Do đó cũng là một trong yếu tố khá thông thường, tôi biên soạn rời khỏi phía trên 1 list những cơ hội căn thân thuộc với CSS. Tôi đã và đang thêm nữa những thẻ nhúng/đường liên kết với từng ví dụ bên trên CodePen. Hãy tự do thoải mái share bọn chúng nhé!

View my CodePens here.

Không dông dài ngoài ra, chiến thôi nào!

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		h1, h3 {
		  text-align: center;
		}

		.blue-square-container {
		  text-align: center;
		}

		.blue-square {
		  background-color: #0074D9;
		  width: 100px;
		  height: 100px;
		  display: inline-block;
		}

		.yellow-square {
		  background-color: #FFDC00;
		  width: 100px;
		  height: 100px;
		  margin: 0 auto;
		}

		.green-square {
		  background-color: #3D9970;
		  width: 100px;
		  height: 100px;
		  position: absolute;
		  left: 50%;
		  margin-left: -50px;
		}
	</style>
</head>
<body>
	<h1>Centering with CSS</h1>

	<h3>Text-Align Method</h3>
	<div class="blue-square-container">
	<div class="blue-square"></div>
	</div>

	<h3>Margin Auto Method</h3>
	<div class="yellow-square"></div>

	<h3>Absolute Positioning Method</h3>
	<div class="green-square"></div>
</body>
</html>

![Result](/media/fileman/Uploads/users/8874/Screen Shot 2018-11-05 at 3.48.50 PM.png)Căn thân thuộc với Căn chữ, Lề tự động hóa và Vị trí tuyệt đối

Phương pháp căn chữ

Sử dụng “text-align:center” có lẽ rằng là cơ hội thông thườn nhất nhằm các bạn căn thân thuộc. Nó dùng làm căn thân thuộc chữ nhập trang HTML của doanh nghiệp, tuy nhiên nó cũng hoàn toàn có thể căn thân thuộc cả thẻ div luôn luôn bại liệt.

Mẹo ở phía trên là:

  1. Bao gói thẻ div tuy nhiên mình thích căn thân thuộc nhập một thành phần thân phụ (hay còn gọi là một trong wrapper hoặc container)
  2. Đặt “text-align:center” nhập thành phần cha
  3. Sau bại liệt bịa đặt bên phía trong thẻ div tính chất “display: inline-block”

Trong ví dụ của tôi với hình vuông vắn màu xanh da trời domain authority trời, Tôi gói nó nhập 1 thẻ div không giống mệnh danh là “blue-square-container”. Để hoàn toàn có thể căn thân thuộc hình vuông vắn màu xanh da trời domain authority trời, tôi cần tạo nên một thành phần thân phụ và bịa đặt tính chất hiển thị của hình vuông vắn màu xanh da trời domain authority trời là “inline-block”.

Đó là cũng chính vì khoác tấp tểnh một thẻ div tiếp tục hiển thị với tính chất “block”, tức là nó sẽ bị giãn nở ra vì chưng cả chiều rộng lớn của trang. bằng phẳng cơ hội bịa đặt tính chất hiển thị trở thành “inline-block”, tất cả chúng ta tiếp tục chắc chắn là rằng nó chỉ mất chiều rộng lớn tuy nhiên tao đang được bịa đặt, ở đấy là 100px.

Thêm từng nào thành phần con cái nhập vào thành phần thân phụ (những hình vuông vắn màu xanh da trời domain authority trời nhập ví dụ) đều tiếp tục căn thân thuộc bọn chúng không còn.

Phương pháp căn lề tự động động

Một cách thức đơn giản và giản dị không giống này đó là dùng cách thức căn lề tự động hóa. Dùng nó tao sẽ không còn sử dụng thành phần thân phụ.

Chúng tao hoàn toàn có thể đơn giản và giản dị mách nhỏ tính chất “margin: 0 auto” cho tới hình vuông vắn gold color, miễn sao tất cả chúng ta bịa đặt cho tới nó một chiều rộng lớn đang được tấp tểnh.

“margin: 0 auto” là cơ hội ghi chép tắt để tại vị margin top và bottom là 0, và margin left và right là tự động.

Điều này vô nằm trong cần thiết, vì chưng còn nếu như không bịa đặt chiều rộng lớn là 100px, thì trình duyệt sẽ không còn thể hiểu rằng tuy nhiên phân tách margin left và right cho tới tương thích nhằm căn thân thuộc hình vuông vắn gold color.

Phần “0” nhập tính chất hoàn toàn có thể bịa đặt tùy ý bám theo số px tuy nhiên mình thích bịa đặt cho tới top và bottom margin.

Một mẹo hoặc nữa là chỉ việc bịa đặt “margin-left: auto” hoặc “margin-right: auto” là tất cả chúng ta hoàn toàn có thể đẩy thẻ div về phía cần hoặc trái ngược trọn vẹn (thử cút nhé!)

Phương pháp địa điểm tuyệt đối

Đặt một thành phần với địa điểm vô cùng được chấp nhận bọn chúng bịa đặt thành phần bại liệt ở bất kì ở đâu bên trên trang…với một điểm bất lợi.

Vị trí vô cùng vô hiệu hóa thành phần ngoài dòng sản phẩm chảy của trang web.

Tại sao điều đó lại quan lại trọng?

Bởi vì như thế rằng nó sẽ gây ra ông xã lấn những thành phần cùng nhau nếu như dùng ko đúng chuẩn.

Nếu tất cả chúng ta chỉ mong muốn đơn giản và giản dị căn thân thuộc một thành phần theo chiều ngang của trang như thể cơ hội tất cả chúng ta thực hiện với 2 cách thức bên trên, với 3 bước nên ghi nhớ:

  1. Đặt địa điểm thành phần với tính chất địa điểm tuyệt đối
  2. Thêm tính chất “left:50%” nhập phần tử
  3. Đặt margin left vì chưng 1/2 chiều rộng lớn phần tử

Trong ví dụ, tất cả chúng ta sử dụng một hình vuông vắn màu xanh da trời lá cây (đẹp xuất sắc). Nó với độ dài rộng như thể giống như những ví dụ không giống là 100px.

Như các bạn đang được thấy, tôi tăng tính chất “position: absolute” và “left:50%” nhập hình vuông vắn màu xanh da trời. Nó tiếp tục chỉ cho tới trình duyệt dịch rời lề trái ngược dịch 50% về phía bên phải.

Nhưng nếu như tôi tạo nên lại ví dụ, và tao không thích nhằm lề trái ngược nhập ở chính giữa, tuy nhiên ở chính giữa của hình vuông vắn tiếp tục trực tiếp sản phẩm với ở chính giữa trang web.

Xem thêm: trung khuyển nam thần

Điều này tiếp tục dẫn tao cho tới bước sau cùng. Để trực tiếp sản phẩm tất cả và tăng khoảng chừng White, tao tiếp tục áp một “margin-left” vì chưng nửa chiều rộng lớn của hình vuông vắn màu xanh da trời. Trong tình huống này là 50px (theo chiều rộng lớn của thành phần, luôn luôn vẫn là một nửa)

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.red-square {
		  background-color: #FF4136;
		  width: 300px;
		  height: 300px;
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  transform: translate(-50%, -50%);
		}

	</style>
</head>
<body>
	<div class="red-square"></div>
</body>
</html>

![red-square-center](/media/fileman/Uploads/users/8874/Screen Shot 2018-11-05 at 8.00.58 PM.png)Căn thân thuộc với Transform/Translate

Phương pháp Transform/Translate

Cho cho tới thời điểm hiện nay tao mới mẻ lần hiểu phương pháp để căn thân thuộc tất cả theo hướng ngang, tuy nhiên nếu như tất cả chúng ta mong muốn bịa đặt nó ở chính giữa 2 chiều của trang thì sao?

Hãy demo căn thân thuộc bám theo cả chiều dọc củ lẫn lộn chiều ngang coi sao.

Do cách thức này cũng sử dụng địa điểm vô cùng và “left:50%” tôi đang được tăng 2 tính chất nữa nhập vào thành phần.

Bằng cơ hội bịa đặt tính chất top là “50%”, tôi chỉ cho tới trình duyệt căn trực tiếp viền bên trên của hình vuông vắn red color nhập thân thuộc trang bám theo chiều dọc củ. Nhưng như ví dụ trước, tất cả chúng ta không thích viền được căn thân thuộc tuy nhiên là tâm của hình vuông vắn nhập thân thuộc trang.

Đây là cơ hội tất cả chúng ta vận dụng một tính chất mới mẻ này đó là “transform”.

Sẽ có khá nhiều nhiều trò hoặc tuy nhiên chúng ta có thể thực hiện với transform, như thể tịnh tiến thủ, xoay hoặc căn chỉnh cảm giác động, tuy nhiên trong ví dụ này tất cả chúng ta tiếp tục dùng tịnh tiến thủ.

Chúng tao tăng tính chất cho tới transform “transform: translate(-50%,-50%)” và a lê hấp!

Hình vuông red color đang được căn thân thuộc bám theo cả chiều ngang lẫn lộn chiều dọc củ.

Tôi vô cũng thích sử dụng cách thức này vì chưng khoác cho tới chiều rộng lớn hoặc cao của thành phần là từng nào nó đều sẽ tiến hành căn thân thuộc nhập trang.

Phương pháp này thông thường được dùng nhập kiến thiết responsive và ko cần thiết bịa đặt margin như thể cách thức địa điểm tuyệt đối

Phương pháp Flexbox

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		html, body toàn thân {
		  height: 100%;
		}

		.purple-square-container {
		  height: 100%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}

		.purple-square {
		  background-color: #B10DC9;
		  width: 300px;
		  height: 300px;
		}
	</style>
</head>
<body>
	<div class="purple-square-container">
  		<div class="purple-square"></div>
	</div>
</body>
</html>

![pink-square-center](/media/fileman/Uploads/users/8874/Screen Shot 2018-11-05 at 8.10.33 PM.png)Căn thân thuộc với Flexbox

Nếu các bạn ko thân quen với Flexbox, cũng chẳng sao cả! Flexbox là một trong module layout hùn tất cả chúng ta dễ dàng và đơn giản chỉnh sửa và bịa đặt những thành phần nhập trang web.

Nếu các bạn cảm thấy hào hứng với việc học tập Flexbox (khuyên tâm thành học tập đê), Flexbox Froggy là một trong điểm ấn tượng và siêu vui mừng nhằm học tập (không nghiền buộc gì đâu riêng gì là tôi từng học tập về Flexbox và đang được iu em nó tổn thất rồi).

Có 4 bước nhằm căn thân thuộc cả ngang lẫn lộn dọc với Flexbox là:

  1. HTML, body toàn thân hoặc thành phần thân phụ phải để độ cao là 100%.
  2. Đặt “display: flex;” cho tới thành phần thân phụ.
  3. Đặt “align-items: center;” cho thành phần thân phụ.
  4. Đặt “justify-content: center;” căn đều phía 2 bên nhập thân thuộc thành phần bao gói thân phụ.

Tôi cũng quí sử dụng sử dụng phương pháp này, nó đều thoả mãn responsive và lại ko cần thiết đo lường và tính toán margin.

Tôi ao ước rằng các bạn thấy bài xích này khai sáng sủa và giúp sức các bạn. Tôi luôn luôn ao ước chào đón những chủ kiến phản hồi nhé! 😄

Link nội dung bài viết gốc: https://medium.freecodecamp.org/how-to-center-things-with-style-in-css-dc87b7542689.

Tác giả:

Stephen Sun Follow

Xem thêm: bánh quy nhỏ nhân đường

Software developer at Moblize, creating SaaS applications for the oil & gas industry.

Dịch giả: Togahepi a.k.a Hà Hiệp.

Khóa học tập Web Frontend cho những người mới mẻ chính thức của Techmaster - bên trên đây