Cách căn giữa một Div theo chiều ngang bằng CSS

Mia Chevalier

03:05:24 Chủ Nhật, 16 tháng 6, 2024

Làm chủ việc căn chỉnh Div bằng CSS

Căn giữa các phần tử theo chiều ngang trong CSS là một nhiệm vụ phổ biến mà các nhà phát triển web gặp phải. Cho dù đó là căn chỉnh nút, hình ảnh hay div, việc đạt được sự căn chỉnh hoàn hảo đôi khi có thể khó khăn. Trong hướng dẫn này, chúng ta sẽ khám phá các phương pháp khác nhau để căn giữa một hình theo chiều ngang

bên trong cái khác

sử dụng CSS.

Bằng cách hiểu và áp dụng các kỹ thuật này, bạn có thể đảm bảo rằng các thành phần web của bạn được định vị chính xác ở nơi bạn muốn. Chúng tôi sẽ đề cập đến các cách tiếp cận khác nhau, bao gồm flexbox, lưới và các phương pháp truyền thống, để giúp bạn hiểu toàn diện về kỹ năng CSS thiết yếu này.

Yêu cầu	Sự miêu tả
display: flex;	Xác định một thùng chứa linh hoạt và cho phép bố trí hộp linh hoạt.
justify-content: center;	Căn giữa các mục theo chiều ngang trong một thùng chứa linh hoạt.
align-items: center;	Căn giữa các mục theo chiều dọc trong một thùng chứa linh hoạt.
place-items: center;	Căn giữa các mục theo chiều ngang và chiều dọc trong vùng chứa lưới.
transform: translate(-50%, -50%);	Dịch chuyển một phần tử đi 50% chiều rộng và chiều cao của chính nó để căn giữa nó.
position: absolute;	Định vị một phần tử so với vị trí tổ tiên gần nhất của nó.
top: 50%;	Định vị một phần tử cách phần tử chứa nó 50%
left: 50%;	Định vị phần tử cách phần tử chứa nó 50% về bên trái.

Căn giữa các phần tử với Flexbox, Grid và CSS truyền thống

Kịch bản đầu tiên trình bày cách căn giữa một

sử dụng . Bằng cách thiết lập trên vùng chứa cha, các phần tử con trở thành các mục linh hoạt. Các thuộc tính tập trung vào các mục này theo chiều ngang, trong khi align-items: center; tập trung chúng theo chiều dọc. Phương pháp này rất linh hoạt và hoạt động tốt cho bố cục động.

Trong tập lệnh thứ hai, chúng tôi sử dụng để đạt được kết quả tương tự. Bằng cách áp dụng vào vùng chứa cha mẹ và , các phần tử con được căn giữa theo cả chiều ngang và chiều dọc. Phương pháp này đặc biệt hữu ích cho bố cục dựa trên lưới. Cuối cùng, phương pháp truyền thống liên quan đến việc thiết lập position: absolute; trên phần tử con và sử dụng Và với để tập trung nó vào trong cha mẹ. Cách tiếp cận này có hiệu quả đối với các phần tử có kích thước cố định.

Sử dụng Flexbox để căn giữa theo chiều ngang của Div

HTML và CSS với Flexbox

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Căn giữa một Div bằng lưới CSS

HTML và CSS với Bố cục dạng lưới

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Phương pháp truyền thống để căn giữa bằng CSS

HTML và CSS với Margin Auto

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Kỹ thuật nâng cao cho các phần tử định tâm

Một phương pháp khác để căn giữa các phần tử theo chiều ngang trong vùng chứa là sử dụng tài sản. Cách tiếp cận này đặc biệt hiệu quả đối với các phần tử nội tuyến hoặc khối nội tuyến. Bằng cách áp dụng vào vùng chứa cha, tất cả các phần tử con sẽ được căn giữa theo chiều ngang. Tuy nhiên, phương pháp này không hoạt động đối với các phần tử cấp khối trừ khi chúng được chuyển đổi thành khối nội tuyến.

Ngoài ra, bạn có thể sử dụng thuộc tính để căn giữa các phần tử cấp khối. Bằng cách đặt lề trái và lề phải của một phần tử thành tự động, bạn có thể căn giữa nó theo chiều ngang trong vùng chứa chính của nó. Kỹ thuật này đơn giản và hoạt động tốt đối với các phần tử có chiều rộng cố định. Việc kết hợp các phương pháp này với các kỹ thuật bố cục CSS hiện đại như Flexbox và Grid sẽ cung cấp bộ công cụ toàn diện để căn chỉnh các phần tử một cách chính xác khi cần.

Làm cách nào để căn giữa một phần tử nội tuyến?
Sử dụng trên vùng chứa chính để căn giữa các phần tử nội tuyến.
Tôi có thể sử dụng lề: auto; để căn giữa một phần tử khối?
Có, đang cài đặt ở bên trái và bên phải sẽ căn giữa một phần tử khối.
Sự khác biệt giữa Flexbox và Grid để định tâm là gì?
được sử dụng cho bố cục một chiều, trong khi dành cho bố cục hai chiều.
Làm cách nào để căn giữa phần tử có chiều rộng cố định bằng CSS?
Sử dụng hoặc với
Tôi có thể căn giữa các phần tử theo chiều dọc bằng Flexbox không?
Có, sử dụng để căn giữa các phần tử theo chiều dọc trong một thùng chứa linh hoạt.
Có căn chỉnh văn bản: giữa; làm việc cho các phần tử khối?
KHÔNG, chỉ hoạt động cho các phần tử nội tuyến hoặc khối nội tuyến.
Làm cách nào để căn giữa nhiều phần tử trong một vùng chứa?
Sử dụng với Và
Mục địa điểm: trung tâm là gì; trong Lưới?
căn giữa các mục theo cả chiều ngang và chiều dọc trong một thùng chứa lưới.
Có thể căn giữa các phần tử mà không cần Flexbox hoặc Grid không?
Có, sử dụng các phương pháp như , , hoặc cũng có thể căn giữa các phần tử.

Tóm tắt các kỹ thuật định tâm CSS

Hiểu cách căn giữa các phần tử theo chiều ngang bằng các phương pháp CSS khác nhau là điều cần thiết để tạo bố cục web hấp dẫn trực quan. Bằng cách nắm vững các kỹ thuật như , , Và tài sản, các nhà phát triển có thể đảm bảo thiết kế của họ vừa có chức năng vừa có tính thẩm mỹ. Việc thử nghiệm các phương pháp này sẽ giúp bạn hiểu sâu hơn về các khả năng của CSS.