Центрирование текста (ссылки) внутри 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

удалить height:15em из тега привязки.и установите его line-height должно быть меньше

как:

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

Answer 2

Высота строки для шрифта 150px очень велика и вызывает переполнение.Поиграйте с высотой строки, чтобы получить желаемый эффект:

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

https://jsfiddle.net/srza8bhk/