垂直居中文本

Question

我的代码中的某些CSS出现问题。使用引导程序，我创建了一个高度为400px的正方形，我想在其中放置垂直居中的文本。我在悬停时使用JavaScript更改文本，这里的问题是，如果文本更改为两行，那么CSS将无法正常工作。

JSfiddle：https://jsfiddle.net/Ljprxkrq/3/由于某种原因，Hover似乎在小提琴中不起作用。

<div class="col-xs-offset-1 col-xs-10 col-sm-offset-0 col-sm-4">
    <div class="navigation-links">
      <h2><a href="#" id="text-display" class="network"
        onmouseover="changeText('More network information here')"
        onmouseout="defaultText()">Network</a></h2>
    </div>
  </div>

.navigation-links {
height: 400px;
}

h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
 }

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: white;
  text-decoration: none;
}

Answer 1

好吧，让我们从JSFiddle和Javascript不起作用。开始>

如果未指定换行设置，则默认为“ onLoad”。结果是所有JavaScript都包装在加载结果后运行的函数中。所有变量都是此函数的局部变量，因此在全局范围内不可用。

将包装设置更改为“不包装”，它将起作用：

[Source-Screenshot

关于问题

：

似乎您已经在使用flex。为什么不将其也用于垂直对齐呢？附加：

.navigation-links {
    display: flex;
    align-items: center;
}
JSFiddle

Answer 2

尝试一下：