选框垂直对齐答案

【问题标题】：Marquee vertical alignment选框垂直对齐
【发布时间】：2012-06-25 17:00:58
【问题描述】：

我对选取框的对齐有疑问。你可以在这里看到它：www.vrobal.com 它不是中间的并且太靠近 div 的边缘。

我尝试对 div 使用 vertical-align:middle，我尝试使用 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 个不同的句子。

【问题讨论】：

标签： html alignment vertical-alignment marquee

【解决方案1】：

在你的styles.css 中有一个<h2> 的规则（第55 行）。 <h2> 元素有一个边距 - 那是你的问题。改成这样：

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

【讨论】：

【解决方案2】：

这里可以这样

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 ，然后您可以将其居中。

【讨论】：