image.png
本文主要介绍以下内容：text-indent，text-align，line-height，vertical-align。

text-indent

已知一个小技巧：使用 text-indent:2em；来实现首行缩进两个单位。

在实际开发中，text-indent:-9999px; 一般用于网站的 LOGO 部分。在搜索引擎优化中，h1 是非常重要的标签。一般情况下，我们都是把网站的 LOGO 图片放到 h1 标签中。不过，搜索引擎只能识别文字，无法识别图片。为了更好地进行搜索引擎优化，此时应该怎么做呢？

有一个很好的解决方法就是：指定 h1 元素的长宽跟 LOGO 图片的长宽一样，然后定义 h1 的背景图片（background-image）为 LOGO 图片。也就是说，我们使用 LOGO 图片作为 h1 标签的背景图片，然后使用 text-indent:-9999px; 来隐藏 h1 的文字内容。

text-indent:-9999px 隐藏文本

  1. <!DOCTYPE html> 
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.       h1
  8.       {
  9.         width:300px;
  10.         height:100px;
  11.         background-image:url(img/logo.jpg);
  12.         text-indent:-9999px;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <h1>Logo</h1>
  18.   </body>
  19. </html>

如果没有 text-indent:-9999px; 那么 Logo 会显示在左上角。

display:none 隐藏文本

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      h1
      {
        width:967px;
        height:1474px;
        background-image:url(fhn1.jpg);
      }
      h1 span{display:none;}
    </style>
  </head>
  <body>
    <h1><span>Logo</span></h1>
  </body>
</html>

页面效果确实是达到了，但是搜索引擎却“不吃这一套”！为什么呢？对于使用 display:none; 隐藏的文字，搜索引擎一般都把这些文字当作垃圾信息忽略掉。要是这样，h1 的权重就会丢失。因此在实际开发中，我们不建议使用这种方式。

为什么定义 text-indent 为 -9999px，而不是 -999px 或 -99px 呢？

对于一般的计算机，常见的屏幕宽度有 1024px、1366px 等。之所以定义 text-indent 为 -9999px，是为了让文字缩进得足够多，就算是在高分辨率屏幕上也看不到文字，因为当今 没有哪台计算机的屏幕宽度能够大于 9999px。如果定义 text-indent 为 -999px 或者 -99px，那 么缩进的文字还是有可能会出现在浏览器窗口内，这就不是我们预期的效果了。

text-align

在 CSS 中，我们可以使用 text-align 属性来定义文本或图片的对齐方式。
image.png

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    div {
      width: 380px;
      height: 380px;
      border: 1px solid gray;
      margin-top: 2px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div>
    <img src="biu.jpg" alt="" />
  </div>
  <div>qilai</div>
</body>

</html>

效果中可见，text-align 属性不仅会作用于文本，还可以作用于图片。

text-align 起作用的元素

text-align 对文本、inline 元素以及 inline-block 元素都会起作用，但对 block 元素不起作用。其中，img 元素就属于 inline-block 元素。 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    #outer-box {
      width: 400px;
      height: 400px;
      border: 1px solid gray;
      text-align: center;
    }

    #inner-box {
      width: 50px;
      height: 50px;
      background-color: Orange;
    }
  </style>
</head>

<body>
  <div id="outer-box">
    <div id="inner-box"></div>
    <img src="biu.jpg" alt="">
  </div>
</body>

</html>

效果中可见，左上角有一个黄色的方框，图片依然在方框中央。即 text-align 属性对 div 不起作用。

text-align:center; & margin:0 auto;

在实现页面水平居中的方式中，text-align:center; 与 margin:0 auto; 是最常见的两种水平居中方式，不过这两者也有着本质的区别。

▶ text-align:center; 实现的是文字、inline 元素以及 inline-block 元素的水平居中。

▶ margin:0 auto; 实现的是 block 元素的水平居中。

▶ text-align:center; 在父元素中定义，margin:0 auto; 在当前元素中定义。

line-height

在 CSS 中，我们可以使用 line-height 属性来定义文本的行高。有的书中称 line-height 为行间距，其实这是非常不严谨的叫法。行高，顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，两者是完全不一样的概念。本节我们来深入学习 line-height 属性。

line-height 定义

在 CSS 中，line-height 还有一个更加准确的定义：两行文字基线之间的距离。

顶线、中线、基线、底线

image.png
在 CSS 中，每一行文字都可以看成一个“行盒子”，而每一个行盒子都有 4 条线：顶线、中线、基线、底线。这 4 条线跟英文簿中的 4 条线是一样的道理。

此外 vertical-align 属性中的 top、middle、baseline、bottom 这 4 个属性值分别对应的就是顶线、中线、基线、底线。注意，基线并不是行盒子中最下面的线，而是倒数第 2 条线。

行高、行距，半行距

image.png
▶ 行高（line-height）：两条基线之间的垂直距离。

▶ 行距：上一行的底线到下一行的顶线之间的垂直距离，也就是两行文字之间的间隔。

▶ 半行距：行距的一半，与行框（inline box）有关。

内容区与行框

▶ 内容区：行盒子顶线到底线之间的垂直距离。

▶ 行框：两行文字“半行距分割线”之间的垂直距离。

深入 line-height

height 和 line-height

line-height 是有默认值的，当没有定义 line-height 属性时，浏览器就会采用默认的 line-height 值。

一行文字的高度是由 line-height 决定，而不是由 height 决定的。例如在 p 标签中，一个 p 标签的文字可以有很多行，其中 line-height 定义的是一行文字的高度，而 height 定义的才是整个段落的高度（即 p 标签的高度）。

在 CSS 中，我们可以定义 height 和 line-height 这两个属性值相等，从而实现单行文字的垂直居中。 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    div {
      width: 240px;
      height: 60px;
      border: 1px solid gray;
      font-size: 12px;
      text-align: center;
    }

    #div1 {
      line-height: 20px;
    }

    #div2 {
      line-height: 40px;
    }

    #div3 {
      line-height: 60px;
    }
  </style>
</head>

<body>
  <div id="div1">height为60px，line-height为20px</div>
  <div id="div2">height为60px，line-height为40px</div>
  <div id="div3">height为60px，line-height为60px</div>
</body>

</html>

line-height 取值为百分比或 em 值

当 line-height 取值为百分比或者 em 值时，元素的行高是相对于“当前元素”的font-size 值来计算的。计算公式如下。 

line-height = （当前元素font-size）×（百分比）
line-height = （当前元素font-size）×（em值）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    #father {
      /*父元素行高：30px×150%=45px*/
      font-size: 30px;
      line-height: 150%;
      background-color: hotpink;
    }

    #son {
      /*子元素行高：20px×120%=24px*/
      font-size: 20px;
      line-height: 120%;
      background-color: lightskyblue;
    }
  </style>
</head>

<body>
  <div id="father">这是父元素
    <div id="son">这是子元素</div>
  </div>
</body>

</html>

如果我们把子元素中 line-height:120%; 这一句代码删除，那么子元素就会直接继承父元素的 line-height** 像素值**，而不是百分比。

line-height 取值为无单位数字

line-height 还支持无单位数字的属性取值，在 CSS 中只有 line-height 属性具有这个特点。 当 line-height 值为无单位数字时，实际的行高同样是相对于“当前元素”的 font-size 值来计算的。 计算公式如下。

文字效果 - 图5

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      body{font-size:30px;}
      #father
      {
        /*父元素行高：30px×1.5=45px*/
        line-height:1.5;
        background-color:hotpink;
      }
      #son
      {
        /*子元素行高：20px×1.5=30px（继承父元素的系数）*/
        font-size:20px;
        background-color:lightskyblue;
      }
    </style>
  </head>
  <body>
    <div id="father">这是父元素
      <div id="son">这是子元素</div>
    </div>
  </body>
</html>

其中，父元素的行高为 30px×1.5=45px，而子元素的行高为 20px×1.5=30px。也就是说，当 line-height 取值为无单位数字时，该无单位数字可以理解为一个系数。子元素继承的是父元素的系数，而不是直接继承父元素的 line-height。

vertical-align

官方解释：

▶ vertical-align 属性用于定义周围的文字、inline 元素以及 inline-block 元素相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了 vertical-align 属性的元素。

▶ 在表格单元格中，vertical-align 属性可以定义单元格 td 元素中内容的对齐方式。td 元素是 table-cell 元素，也就是说 vertical-align 属性对 table-cell 类型元素有效。

▶ vertical-align 属性对 inline 元素、inline-block 元素和 table-cell 元素有效，对 block 元素无效。

▶ vertical-align 属性允许指定负长度值（如 -2px）和百分比值（如 50%）。

已知每一行文字都可以看成一个行盒子。事实上，每一个 inline-block 元素也 可以看成一个行盒子。其中每一个行盒子同样也有 4 条线：顶线、中线、基线、底线。这 4 条线跟英文簿中的 4 条线是相似的。 image.png
vertical-align 属性中的基线跟 line-height 属性中的基线是一样的道理。在 CSS 中， vertical-align 属性最常见的属性值有 4 个。 image.png

vertical-align 属性取值

负值

vertical-align 属性取值可以为负值，例如，vertical-align:-2px 表示使得元素相对于基线向上偏移 2px，常用于解决单选框或是复选框与周围文本对齐的问题。

百分比

vertical-align 属性取值可以为百分比，这个百分比是相对于当前元素所继承的 line-height 属性值而决定的。

如果当前元素定义了一个 vertical-align:50%，并且它的 line-height 为 20px，则 vertical-align:50% 实际上等价于 vertical-align:10px。其中，vertical-align:10px 表示当前元素相对于它的基线向下偏移 10px。

关键字

image.png

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    img {
      width: 80px;
      height: 80px;
    }

    #img1 {
      vertical-align: top;
    }

    #img2 {
      vertical-align: middle;
    }

    #img3 {
      vertical-align: bottom;
    }

    #img4 {
      vertical-align: baseline;
    }
  </style>
</head>

<body>
  顶部对齐<img id="img1" src="biu.jpg" alt="" />七濑胡桃<strong>top</strong>）
  <hr />
  中部对齐<img id="img2" src="biu.jpg" alt="" />七濑胡桃<strong>middle</strong>）
  <hr />
  基线对齐<img id="img3" src="biu.jpg" alt="" />七濑胡桃<strong>bottom</strong>）
  <hr />
  底部对齐<img id="img4" src="biu.jpg" alt="" />七濑胡桃<strong>baseline</strong>）
</body>

</html>

image.png
根据 W3C 的定义：vertical-align 属性用于定义周围文字、inline 元素或 inline-block 元素相对于该元素基线的垂直对齐方式。在这个例子中，vertical-align 属性定义的是周围的文字相对于 img 元素基线的垂直对齐方式。

vertical-align 属性应用

inline 元素和 inline-block 元素

在 HTML 中，常见的 inline-block 元素有两个：img 和 input。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    strong
    {
      font-size: 40px;
      /* border: 1px solid green; */
      vertical-align: baseline;
    }
  </style>
</head>
<body>
    <div>
      <span>hutaotao</span><strong>hutaotao</strong><span>hutaotao</span>
    </div>
</body>
</html>

block 元素

  vertical-align 属性对 inline 元素、inline-block 元素和 table-cell 元素有效，对 block 元素无效。  

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    div {
      display: table-cell;
      width: 200px;
      height: 200px;
      border: 1px solid gray;
      vertical-align: middle;
      text-align: center;
      font-size: 0%;
    }
    img
    {
      width: 80px;
      height: 80px;
    }
  </style>
</head>

<body>
  <div>
    <img src="biu.jpg" alt="" />
    <img src="wu.jpg" alt="">
    <img src="map.jpg" alt="">
    <img src="heng.jpg" alt="">
  </div>
</body>

</html>

div 元素是 block 类型，因此 vertical-align 属性对其无效。如果想要在 div 中实现图片的垂直居中，我们可以先为 div 定义 display:table-cell，也就是将 block 元素转化为 table-cell 元素（表格单元格），然后再使用 vertical-align:middle 就可以实现了。

table-cell 元素

在表格单元格中，vertical-align 属性可以定义单元格中内容的对齐方式。也 就是说 vertical-align 属性对 table-cell 类型元素有效。

注意 table-cell 元素跟 inline、inline-block 元素对于 vertical-align 的使用是有很大区别的：

▶ nline 元素和 inline-block 元素的 vertical-align 是针对周围的元素来说的，vertical-align 定义的是周围元素相对于当前元素的对齐方式 。

▶ table-cell 元素的 vertical-align 属性是针对自身而言的。vertical-align 定义的是内部子元素相对于自身的对齐方式。