Question

我的代码中存在一些CSS问题。使用bootstrap我创建了一个高度为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"

demo

Answer 2

好吧，好吧，让我们从 JSFiddle开始，Javascript无效。

如果您没有指定换行设置，则默认为＆＃34; onLoad＆＃34;。这会导致在加载结果后将所有JavaScript包装在函数运行中。所有变量都是此函数的本地变量，因此在全局范围内不可用。

将换行设置更改为＆＃34;不换行＆＃34;并且它将起作用：

Source - Screenshot

至于问题：

好像你已经使用过flex了。为什么不直接使用它进行垂直对齐？附加：

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

JSFiddle

垂直居中文本

2 个答案: