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: căn chỉnh div sang bên phải css

Căn giữa mọi thứ là một trong những cách nhất các khía cạnh khó 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ủ đề căn chỉnh div sang bên phải css

Aligning Divs Side by Side CSS & HTML tutorial

alt

  • Tác giả: The Wheelchair Guy
  • Ngày đăng: 2020-12-02
  • Đánh giá: 4 ⭐ ( 5160 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: in this video, I will show you how to place three DIVS beside each other using HTML AND CSS. It is easy to accomplish that, and you need to pay attention to the percentages of the width. All divs by default are 100%. if you divide it by three, the results will be 33.33% Set the width of each div to 33.33%. Float the left Div to left. float: left; float the right DIV to right float:right; and to center the middle div, just add margin: 0 auto; This way the divs should be placed next to each other smoothly. Also, if you want to add more width to a specific DIV, basically, decrease the percentage from one Div and add it to the other DIV.

    webDesign CSS html

Căn giữa thẻ div trong thẻ div

  • Tác giả: phantienquang.blogspot.com
  • Đánh giá: 4 ⭐ ( 5821 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn tạo right aligned menu và centered menu bằng CSS

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 9569 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Menu tab là một phần quan trọng và không thể thiếu trong mọi trang web. Thiết kế một menu đẹp và hiện đại sẽ giúp cho trang web thiếp cận được nhiều người.

CSS Alignment - Tự học CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 1520 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay bạn sẽ được học về các phương pháp căn chỉnh CSS phổ biến và 3 giải pháp clear float mà đã làm bao nhiêu lập trình viên đau đầu.

Ví dụ về kiểu văn bản căn giữa, căn đều, căn phải

  • Tác giả: kiemlua24h.co
  • Đánh giá: 3 ⭐ ( 2979 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng tôi sử dụng CSS text-align thuộc tính để căn chỉnh nội dung bên trong phần tử cấp khối.Ví dụ về các phần tử cấp khối là các đoạn văn...

Thuộc tính right

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 1029 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính right được dùng để định vị trí bên phải (right) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép phải ngoài cùng của thành phần bao ngoài - Học web chuẩn

Căn trái và căn phải trong div trong Bootstrap

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 8471 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cập nhật 2018 ... Bootstrap 4.1+ pull-right Hiện tại là float-right text-right giống như 3.x và…

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  Emmet in Visual Studio Code - emmet plugin

By ads_php