垂直居中文字

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

尝试这个：

 .navigation-links { background: #eee none repeat scroll 0 0; display: table-cell; height: 100px; vertical-align: middle; } 

 <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> 

更新：
你可以添加类vertical-center与navigation-links像class="navigation-links vertical-center"

演示

Answer 2

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

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

将包装设置更改为“不包装”即可使用：

来源 - 屏幕截图

至于问题 ：

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

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

的jsfiddle