在設計網頁時,表格的應用是不可避免的。而表格中的文字如果不居中,就會顯得非常不美觀,在這里我們可以使用CSS來解決這個問題。
CSS提供了一個text-align屬性,可以使一個塊級元素中的文本居中。但是,在表格中使用該屬性時,似乎不起作用。那該怎么辦呢?
解決方法也很簡單,我們可以將文字放在一個塊級元素中,然后再使用text-align來使其居中。代碼如下:
以上代碼實現了一個簡單的表格,并且讓其中的文字居中顯示。重點在于td p這一段代碼,它使得文字的父元素為p標簽,然后設置display為inline-block,使其展示為行內元素,同時使用vertical-align:middle來使其在單元格中垂直居中,最后再使用text-align:left來使其水平居中。
總結一下,讓表格中的文字居中并不是一個難題,只要將文字放在一個塊級元素中,然后再利用text-align屬性來實現居中即可。
CSS提供了一個text-align屬性,可以使一個塊級元素中的文本居中。但是,在表格中使用該屬性時,似乎不起作用。那該怎么辦呢?
解決方法也很簡單,我們可以將文字放在一個塊級元素中,然后再使用text-align來使其居中。代碼如下:
table { border-collapse: collapse; } td { height: 50px; width: 100px; text-align: center; } td p { display: inline-block; vertical-align: middle; text-align: left; }
以上代碼實現了一個簡單的表格,并且讓其中的文字居中顯示。重點在于td p這一段代碼,它使得文字的父元素為p標簽,然后設置display為inline-block,使其展示為行內元素,同時使用vertical-align:middle來使其在單元格中垂直居中,最后再使用text-align:left來使其水平居中。
總結一下,讓表格中的文字居中并不是一個難題,只要將文字放在一個塊級元素中,然后再利用text-align屬性來實現居中即可。
上一篇css收起標志上下抖動
下一篇css改變div模糊度