css水平和垂直居中的技巧 [英] css trick for centering horizontal and vertical

问题描述

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

My .cent class is for <li> elements. I want to center the text of the <li> both horizontally and vertically. text-align:center; takes care of horizontal centering, but the vertical centering isn't working. What's the CSS trick for this?

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

推荐答案

使用 line-height 属性。

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

Set it equal to height of element, and text will be vertically centered.

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

这篇关于css水平和垂直居中的技巧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！