用于居中水平和垂直的css技巧

Question

我的.cent类用于<li>元素.我想要<li>水平和垂直居中的文本.text-align:center;负责水平居中,但垂直居中不起作用.这个CSS技巧是什么？

.cent{
  height:20px;
  width:20px;
  text-align:center;
  vertical-align: middle;
}

Answer 1

使用line-height财产.

设置它等于元素的高度,文本将垂直居中.

.cent{
  height: 20px;
  width: 20px;
  text-align: center;
  /*vertical-align: middle;*/
  line-height: 20px;
}