Hướng dẫn các cách căn giữa table trong html mới nhất 2020

mọi người kêu la tại sao căn giữa trong CSS nó lại khó khăn như vậy? . Tôi nghĩ rằng chủ đề chẳng phải rất khó để làm, có rất nhiều mẹo không giống nhau để làm điều đó, tùy thuộc vào tình hình. Chúng ta sẽ chia nhỏ nó ra và hi vọng nó sẽ không khó khăn hơn

1.Horizontally( Căn giữa theo chiều ngang)

1.1 Nó là inline và inline-* (như text hoặc link)

Bạn có thể căn chỉnh các element inline theo chiều ngang, ở trong 1 phần tử cha kiểu block ta chỉ cần phong cách giống như sau:

text-align: center;

các bạn tham khảo ví dụ 1:

this is paragraph

p text-align: center;background: blue;padding: 10px;color: #fff;
    

và hiệu quả ta được như hình ảnh sau :

link dùng thử ở đây : https://jsfiddle.net/1qxh934q/1/

1.2 Nó là phần tử kiểu block

• Để căn giữa ta để margin-left và margin-right là auto, nó sẽ tự căn đều hai bên.
• Và dĩ nhiên phần tử đó cần có width cụ thể và nhỏ hơn cha của nó. Còn nếu mà nó full-width( width=100%) thì bạn sẽ ko căn giữa được nó nữa.

margin: 0 auto;

xét ví dụ 2:

.block-center width: 300px; // cho width 1 trị giá nhất địnhbackground: red;color: white;margin: 0 tự động  // căn giữapadding: 10px;
  

• xem kết quả qua hình ảnh sau :

liên kết demo ở đây : https://jsfiddle.net/1qxh934q/2/

1.3 Căn giữa cho nhiều phần tử kiểu block

• Nếu bạn có 2 hoặc nhiều hơn phần tử block và cần căn giữa cho chúng theo horizontally( chiều ngang) trên nhiều dòng( row) . Thì chúng ta vẫn phong cách bình thường cho từng phần tử block.
• xét gợi ý 2:

.block-center margin: 10px auto;width: 300px;background: red;color: white;padding: 10px;
  

kết quả như hình ảnh dưới đây  dùng thử link : https://jsfiddle.net/1qxh934q/3/

• Nếu bạn có 2 hoặc nhiều hơn phần tử block và cần căn giữa cho chúng theo horizontally( chiều ngang) trên cùng 1 dòng( row). Thì chúng ta phong cách các phần tử đó sang dạng inline-* hoặc dùng flexbox
• Xét gợi ý dưới đây : vẫn gợi ý 2 chỉ phong cách # khi sang dạng inline

.block-center max-width: 200px;background: red;color: white;padding: 10px;display: inline-block;margin: 5px 0;
  #content text-align: center;
  

kết quả giống như pic dưới đây  liên kết demo: https://jsfiddle.net/1qxh934q/4/

• Xét gợi ý dưới đây : vẫn ví dụ 2 chỉ phong cách # khi sang dạng flexbox ta ko sử dụng inline-block nữa

.block-center max-width: 200px;background: red;color: white;padding: 10px;margin: 5px;
  #content display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
  

kết quả như hình ảnh dưới đây  link demo: https://jsfiddle.net/1qxh934q/5/

2. Vertically ( theo chiều dọc)

• Với căn giữa theo chiều dọc thì nó sẽ phức tạp hơn

2.1 Nó là inline và inline-* (như text hoặc link)

a. Nó là một dòng

• Với kiểu này ta chỉ cần padding trên dưới = nhau là xong

padding-top: 20px;
padding-bottom: 20px;

xem vi dụ sau:

.vertical-center 
    max-width: 200px;
    background: red;
    color: white;
    padding: 10px;
  

kết quả ta thu được như hình ảnh

giống như demo ở link sau: https://jsfiddle.net/1qxh934q/8/

• Vì 1 nguyên nhân nào đó mà sử dụng padding mà vẫn không được và bạn biết chắc là phần tử đó sẽ k xuống dòng bạn có thể dùng line-height và white-space: nowrap như sau:

.vertical-center max-width: 200px;background: red;color: white;height: 100px;line-height: 100px;padding: 10px;white-space: nowrap;
  

hiệu quả thu được giống như hình ảnh bên dưới  liên kết dùng thử : https://jsfiddle.net/1qxh934q/9/

b. Nó là nhiều thể loại

• dùng padding-top, padding-bottom để căn giữa cho nhiều định dạng. Nhưng đôi khi sử dụng nó không được vì đoạn text đó vừa mới nằm trong table-cell. Ta sẽ sử dụng vertical-align cho việc căn giữa
• xét ví dụ sau:

.center-table 
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;

.center-table p 
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;

kết quả giống như pic sau:

liên kết dùng thử : https://jsfiddle.net/1qxh934q/10/

• Nếu những cách trên ko được bạn có thể sử dụng flexbox( hướng dẫn này chỉ dùng khi cha nó có chiều cao định sẵn)

 display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;

Nguồn: intermet.com