垂直居中文本

Question

我的代码中的某些 CSS 存在问题。 使用引导程序，我创建了一个高度为 400 像素的正方形，我希望在其中放置垂直居中的文本。 我在悬停时使用 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

试试这个：

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

demo