CSS文字垂直居中和font-family属性

1、单行文字的垂直居中

  单行文字垂直居中比较简单,直接让行高==盒子高度即可。

2、多行文字居中

  多行文字居中,只需简单计算一下盒子的上padding即可。计算公式:padding-top60=(盒子的高度200-文字总行数4*行高20)/2

多行文字第一行文字缩进两个文字,用text-indent:2em;属性。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        *{
            margin:0;padding:0;
        }
        p{
            width:200px;
            height:140px;
            background:red;
            padding-top:60px;
            line-height:20px;
            font-size:14px;
        }
    </style>
  </head>
  
  <body>
      <div>
          <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
      </div>
  </body>
</html>

3、页面中常用字体:微软雅黑,宋体,黑体。备选字体用逗号隔开,备选字体可以有多个。Times New Roman和Arial 只匹配英语但是一定要放在最前面才能对英文字母起作用。

原文地址:https://www.cnblogs.com/sylz/p/5712347.html