用于居中水平和垂直的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;
}

Answer 2

它的父母是什么？

.parent {
   position: relative;   
}

.cent {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -10px;
   margin-top: -10px;
}

或者，如果您希望vertical-align: middle有效，请设置display: table-cell。

Answer 3

尝试设置li标签的样式，边距和填充标签会帮助你

像，

# set default
li 
  {
  margin: 0;
  padding: 0;
  }

在为你的分类写出风格之后，它会正确地影响li标签。