căn giữa table trong html là một trong những từ khóa được search nhiều nhất trên google về chủ đề căn giữa table trong html. Trong bài viết này,hoclamweb.vn sẽ viết bài viết Hướng dẫn các cách căn giữa table trong html mới nhất 2020.
Hướng dẫn các cách căn giữa table trong html mới nhất 2020.
hướng dẫn căn giữa trong css(p1)
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:
id=content>
class="block-center">Is it a block level element?.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:
id=content>
class="block-center">Is it a block level element?class="block-center">Is it a block level element?class="block-center">Is it a block level element?.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:
Is it a block level element?.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:
I'm vertically centered multiple lines of text in a CSS-created table layout.
.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
