Căn giữa mọi thứ là một trong những khía cạnh khó nhất của CSS. Bản thân các phương pháp này thường không khó hiểu. Thay vào đó, nó nhiều hơn do thực tế là có rất nhiều cách để căn giữa mọi thứ. Phương pháp bạn sử dụng có thể khác nhau tùy thuộc vào phần tử HTML mà bạn đang thử

< font style = "vertical-align: inherit;"> Bạn đang xem: html style location center

Căn giữa mọi thứ là một trong những khía cạnh khó nhất của CSS.

Bản thân các phương pháp này thường không khó hiểu. Thay vào đó, nó nhiều hơn do thực tế là có rất nhiều cách để căn giữa mọi thứ.

Phương pháp bạn sử dụng có thể khác nhau tùy thuộc vào phần tử HTML mà bạn đang cố căn giữa hoặc bạn đang căn giữa nó theo chiều ngang hay chiều dọc.

Trong hướng dẫn này, chúng tôi sẽ xem qua cách căn giữa các phần tử khác nhau theo chiều ngang, chiều dọc và cả chiều dọc và chiều ngang.

Cách căn giữa theo chiều ngang

Căn giữa các phần tử theo chiều ngang là nói chung là dễ dàng hơn so với căn giữa chúng theo chiều dọc. Dưới đây là một số yếu tố phổ biến mà bạn có thể muốn căn giữa theo chiều ngang và các cách khác nhau để thực hiện.

Cách căn giữa văn bản với thuộc tính CSS Text-Align Center

Để căn giữa văn bản hoặc liên kết theo chiều ngang, chỉ cần sử dụng thuộc tính text-align với giá trị center :

  & lt; div class = "container" & gt;
  & lt; p & gt; Xin chào, Thế giới (ở giữa)! & lt; / p & gt;
& lt; / div & gt;
 
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
}

P {
  / * Căn giữa theo chiều ngang * /
  text-align: center;
}
 

image-15

Cách Căn giữa một Div bằng CSS Margin Auto

Sử dụng thuộc tính viết tắt margin với giá trị 0 auto để căn giữa các phần tử cấp khối như div theo chiều ngang:

  & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;  
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều ngang * /
  margin: 0 auto;
}
 

box-centered-vertical

Cách căn giữa Div theo chiều ngang bằng Flexbox < / h3>

Flexbox là cách hiện đại nhất để căn giữa mọi thứ trên trang và giúp thiết kế bố cục đáp ứng dễ dàng hơn nhiều so với trước đây. Tuy nhiên, nó không được hỗ trợ đầy đủ trong một số trình duyệt cũ như Internet Explorer.

Để căn giữa một phần tử theo chiều ngang với Flexbox, chỉ cần áp dụng display: flex justify-content: center đến phần tử mẹ:

  & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  / * Con giữa theo chiều ngang * /
  hiển thị: flex;
  justify-content: trung tâm;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
}
 

box-centered-vertical-1

Cách căn giữa theo chiều dọc

Căn giữa các phần tử theo chiều dọc mà không có các phương pháp hiện đại như Flexbox có thể là một việc vặt thực sự. Ở đây, chúng ta sẽ xem xét một số phương pháp cũ hơn để căn giữa mọi thứ theo chiều dọc, sau đó hướng dẫn bạn cách thực hiện với Flexbox.

Cách Căn giữa Dọc với Định vị Tuyệt đối và Lề Phủ định của CSS

Trong một thời gian dài, đây là cách tốt nhất để căn giữa mọi thứ theo chiều dọc. Đối với phương pháp này, bạn phải biết chiều cao của phần tử bạn muốn căn giữa.

Đầu tiên, đặt thuộc tính position của phần tử mẹ thành relative .

Sau đó, đối với phần tử con, hãy đặt thuộc tính position thành tuyệt đối top thành 50% :

 & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  /* Thành lập */
  chức vụ: thân nhân;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều dọc * /
  vị trí: tuyệt đối;
  top: 50%;
}
 

box-centered-vertical-1

Nhưng điều đó thực sự chỉ căn giữa theo chiều dọc cạnh trên của phần tử con.

Để thực sự căn giữa phần tử con, đặt thuộc tính margin-top thành - (một nửa chiều cao của phần tử con) :

  .container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  /* Thành lập */
  chức vụ: thân nhân;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều dọc * /
  vị trí: tuyệt đối;
  top: 50%;
  margin-top: -25px; / * Một nửa chiều cao của phần tử này * /
}  

box-centered-vertical-final

Cách căn giữa một Div theo chiều dọc với Biến đổi và Dịch

Nếu bạn không biết chiều cao của phần tử bạn muốn căn giữa (hoặc ngay cả khi bạn làm như vậy), thì phương pháp này là một mẹo nhỏ.

Phương pháp này rất giống với phương pháp định biên phủ định ở trên. Đặt thuộc tính position của phần tử mẹ thành tương đối .

Đối với phần tử con, hãy đặt thuộc tính position thành tuyệt đối và đặt top thành 50% . Bây giờ thay vì sử dụng một lề âm để thực sự căn giữa phần tử con, chỉ cần sử dụng convert: translate (0, -50%) :

  & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  /* Thành lập */
  chức vụ: thân nhân;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều dọc * /
  vị trí: tuyệt đối;
  top: 50%;
  biến đổi: dịch (0, -50%);
}
 

box-centered-vertical-final-1

Lưu ý rằng translate (0, -50%) là viết tắt của translateX (0) translateY (-50%) . Bạn cũng có thể viết convert: translateY (-50%) để căn giữa phần tử con theo chiều dọc.

Cách căn giữa một Div theo chiều dọc với Flexbox

Giống như căn giữa mọi thứ theo chiều ngang, Flexbox giúp căn giữa mọi thứ theo chiều dọc cực kỳ dễ dàng.

Để căn giữa một phần tử theo chiều dọc, hãy áp dụng display : flex align-items: center thành phần tử mẹ:

  & lt; div class = "container" & gt ;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;  
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  / * Căn giữa theo chiều dọc * /
  hiển thị: flex;
  align-các mục: trung tâm;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
}
 

box-centered-vertical-final-2

Cách căn giữa Cả theo chiều dọc và chiều ngang

Cách căn giữa một dải theo chiều dọc và Theo chiều ngang với Định vị tuyệt đối CSS và Lề phủ định

Điều này rất giống với phương pháp ở trên để căn giữa một phần tử theo chiều dọc. Giống như lần trước, bạn phải biết chiều rộng và chiều cao của phần tử bạn muốn căn giữa.

Đặt thuộc tính position của phần tử mẹ thành tương đối .

Sau đó, đặt thuộc tính position của trẻ thành tuyệt đối , top thành 50% , và trái thành 50% . Thao tác này chỉ căn giữa góc trên cùng bên trái của phần tử con theo chiều dọc và chiều ngang.

Để thực sự căn giữa phần tử con, hãy áp dụng lề trên âm được đặt thành một nửa chiều cao của phần tử con và đặt lề trái âm thành một nửa chiều rộng của phần tử con:

 & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  /* Thành lập */
  chức vụ: thân nhân;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều dọc và chiều ngang * /
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
  lề: -25px 0 0 -25px; / * Áp dụng lề trên và lề trái phủ định để thực sự căn giữa phần tử * /
}
 

box-centered-vertical-and-vertical

Cách căn giữa một phần theo chiều dọc và chiều ngang với Chuyển đổi và dịch

Sử dụng phương pháp này để căn giữa một phần tử theo chiều dọc và chiều ngang nếu bạn không biết kích thước chính xác của nó và không thể sử dụng Flexbox.

Đầu tiên, hãy đặt thuộc tính position của phần tử mẹ thành tương đối .

Tiếp theo, đặt thuộc tính position của phần tử con thành tuyệt đối , top thành 50% trái thành 50% .

Cuối cùng, hãy sử dụng biến đổi: dịch (-50%, -50%) để thực sự căn giữa phần tử con:

  & lt; div class =" container "& gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  /* Thành lập */
  chức vụ: thân nhân;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều dọc và chiều ngang * /
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
  biến đổi: dịch (-50%, -50%);
}
 

box-centered-vertical-and-vertical-1

Cách căn giữa một Div theo chiều dọc và chiều ngang với Flexbox

Flexbox là cách dễ nhất để căn giữa một phần tử theo cả chiều dọc và chiều ngang.

Đây thực sự chỉ là một kết hợp của hai phương pháp Flexbox trước đó. Để căn giữa (các) phần tử con theo chiều ngang và chiều dọc, hãy áp dụng justify-content: center align-items: center cho phần tử mẹ:

  & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 
 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  / * Căn giữa theo chiều dọc và chiều ngang * /
  hiển thị: flex;
  justify-content: trung tâm;
  align-các mục: trung tâm;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
}
 

box-centered-vertical-and-vertical-2

Đó là mọi thứ bạn cần biết để tập trung vào những gì tốt nhất của chúng. Bây giờ, hãy đi ra và căn giữa tất cả mọi thứ.


Xem thêm những thông tin liên quan đến chủ đề trung tâm vị trí kiểu html

JavaScript 22 - DOM Events - Trung Tâm Java Master

alt

  • Tác giả: JMaster Trung Tâm Java
  • Ngày đăng: 2020-07-03
  • Đánh giá: 4 ⭐ ( 3408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML Event & Listener là sự kiện diễn ra trên giao diện của trang website nhưu người dùng click vào button, di chuột, rê chuột,... mỗi sự kiện như vậy đều được trình duyệt hỗ trợ bắt và gọi lại ở 1 hàm listener callback, từ đó người dùng có thể tuỳ biến thay đổi nội dung qua code js dựa vào event diễn ra.

Tìm hiểu về thuộc tính position trong CSS

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 9675 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiểu về thuộc tính position trong css – Khi bạn thiết kế các layout cho website việc chuyển từ file thiết kế theo định dạng HTML

Hướng dẫn cách căn chỉnh vị trí trong html mới nhất 2020

  • Tác giả: cachthietkeweb.vn
  • Đánh giá: 3 ⭐ ( 1194 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: căn chỉnh vị trí trong html là một trong những từ khóa được search nhiều nhất trên google về chủ đề căn chỉnh vị trí trong html. Trong bài viết này, cachthietkeweb.vn sẽ viết bài Hướng dẫn cách căn chỉnh vị trí trong html mới nhất 2020.

Thuộc tính vị trí kiểu DOM HTML

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 3 ⭐ ( 9282 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

Vị trí

  • Tác giả: thematrixone.vn
  • Đánh giá: 3 ⭐ ( 5579 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Căn chỉnh vị trí trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 9302 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn chỉnh vị trí trong CSS - Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

[Tự học HTML] Kiểu dáng(Styles) trong HTML

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 9811 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính kiểu(Styles) trong HTML được sử dụng để thêm kiểu cho một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước và hơn thế nữa.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Thẻ trước HTML - pre có nghĩa là gì trong html

By ads_php