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