字幕垂直對齊

Question

我有一個關於字幕對齊的問題。你可以在這裏看到它：www.vrobal.com它不是中間的，靠得太近了。

我試圖使用vertical-align：middle爲div，我試圖使用margin-top：-10px和其他一些方法，但它們工作不正常。任何建議？

<div style=" padding:0px;"> 
<marquee direction="left" style="padding:0px; background:#2c74a6; height:40px; marging:0px;"><h2><span style="color:#000000">INNOVATION | IMPROVISATION | IMPLEMENTATION&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VICTORY TO GLOBAL RECYLING</span></h2></marquee></div> 

P.S：在「& NBSP」有沒有空間了2句，因爲我需要顯示2個不同的句子出來時，另一種是走在同一個帳篷。

Answer 1

這裏能做到這樣

HTML：

<div style=" padding:0px;"> 
<marquee direction="left" style="padding:0px; background:#2c74a6; height:40px; marging:0px;"> 
<span class="text">INNOVATION | IMPROVISATION | IMPLEMENTATION | VICTORY TO GLOBAL RECYLING</span></marquee></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS：

.text { 
    display: inline-block; 
    margin-top: 8px; 
    color: #000000; 
}​ 

我建議您刪除<h2>並設置你的<span>到display: inline-block，然後用保證金將其居中。

Answer 2

在你的styles.css中，你有一個規則<h2>（第55行）。 <h2>元素有餘量 - 這是你的問題。改變這樣的：

h2 { 
    font-size: 24px; 
    line-height: 40px; /* height of your marquee */ 
    margin: 0; 
}