垂直居中文本

我的代碼中存在一些CSS問題。使用引導程序我創建了一個400px高的正方形，並且我希望在那裏有垂直居中的文本。我正在使用JavaScript更改文字時，這裏的問題是如果文本更改爲兩行值，CSS然後不再正常工作。垂直居中文本

JSfiddle：https://jsfiddle.net/Ljprxkrq/3/由於某些原因，懸停似乎不能在小提琴中工作。

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

來源

2015-06-29 Adam Fenwick

告訴我們你的CSS – Bugaloo

和你的JavaScript。 – GolezTrol

更好 - 製作一個可以複製問題的jsfiddle或類似軟件。 –

試試這個：

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

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

demo

來源

2015-06-29 19:28:00

table-cell不幸地與自舉列混亂，使得方形成爲不同的大小而不是整列寬度 –

ok然後使用垂直居中的vertical-align：middle; –

好吧，我們從開始JSFiddle和Javascript無法正常工作。

如果您未指定包裝設置，則默認爲「onLoad」。這會導致所有的JavaScript被包裝在加載結果後運行的函數中。所有變量都是本地函數，因此在全局範圍內不可用。

更改環繞設置爲「無包裝」，它會工作：

Source - Screenshot

至於問題：

好像你正在使用Flex已經。爲什麼不把它用於垂直對齊呢？附加：

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

JSFiddle

來源

2015-06-29 20:04:57

從未想過！謝謝你的兩個部分！ –

垂直居中文本

回答

相關問題