在css中,讓表格居中是一種非常普遍的需求。下面介紹三種方法,來實現(xiàn)讓表格在網(wǎng)頁中居中。
方法一:使用margin:auto實現(xiàn)水平居中 table{ margin: auto; }
這種方法是最常用的方法,在table的css樣式中使用margin:auto來實現(xiàn)水平居中。同時為了讓表格垂直居中,我們可以給父級元素設(shè)置一定的高度并設(shè)置line-height屬性。代碼如下:
.parent{ height: 200px; //設(shè)置父級元素高度 line-height: 200px; //設(shè)置行高等于父級元素高度 text-align: center; //文字水平居中 } table{ margin: auto; //表格水平居中 }
方法二:使用flex布局實現(xiàn)居中
.parent{ display: flex; //使用flex布局實現(xiàn)居中 justify-content: center; //水平居中 align-items: center; //垂直居中 } table{ width: 80%; //設(shè)置表格寬度 }
方法三:使用table元素設(shè)置margin:auto實現(xiàn)
.parent{ display: table; //使用table元素實現(xiàn) margin: 0 auto; //水平居中 } table{ width: 80%; //設(shè)置表格寬度 }
總而言之,在css中讓表格居中有多種方法,針對不同的需求使用不同的方法可以讓頁面顯示效果更好。