在div中居中文本（链接）

Question

由于某种原因，我的文本（链接）被推送到div容器之外。我希望文本在div中，并且文本对我来说是可点击的，而不是整个div。

HTML

<div class="title">
        <a href="http://www.google.com">Work</a>
    </div>

CSS

.title {

  position: absolute;
  background-color: red;
  z-index: 5;
  height: 15em;
}

.title a {

  height: 15em;
  font-size: 150px;
  text-decoration: none;
  font-family: 'Inknut Antiqua', serif;
}

在浏览器中检查时，由于某种原因，''非常大。

谢谢。

.title {

  position: absolute;
  background-color: red;
  z-index: 5;
  height: 15em;
}

.title a {

  height: 15em;
  font-size: 150px;
  text-decoration: none;
  font-family: 'Inknut Antiqua', serif;
}

<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">

<div class="title">
			<a href="http://www.google.com">Work</a>
		</div>

Answer 1

150px字体的行高非常大，导致溢出。玩线高度来获得你想要的效果：

.title a {
  height: 15em;
  font-size: 150px;
  line-height: 150px;
  text-decoration: none;
  font-family: 'Inknut Antiqua', serif;
}

https://jsfiddle.net/srza8bhk/

Answer 2

从锚标记中删除height:15em。并设置它的line-height应该更少

喜欢：

.title a {
  font-size: 150px;
  line-height: 1px;
  text-decoration: none;
  font-family: 'Inknut Antiqua', serif;
 }