垂直对齐 css 无效 html

Question

我正在做这个页面。我想垂直对齐显示 Od27 的文本，ver eventos（它是

，在 div 内）。 css 在 jsfiddle 页面中。

我解决不了。我看到了其他人的其他帖子，并试图用那个解决它，什么也没有。

<body>
<section class="home">
    <header>
    <div class="kvf_fotografia"></div>
    <nav class="main-nav">
        <ul>
        <li class="nav-home">Home</li>
        <li class="nav-eventos">Eventos</li>
        <li class="nav-portfolio">Portfolio</li>
        <li class="nav-contacto">Contacto</li>
        </ul>
     </nav>
</header>
</section>
<section class="eventos">
    <h2>Eventos</h2>
    <ul>
    <li class="e1">
        <img src="img/eventos1.png">
        <div class="29er-desc">
        <p class="29er-p">29er</p>
        <p class="ver-eventos">ver eventos</p>
        </div>
    </li>
    <li class="e2">
        <img src="img/eventos2.png">
        <div class="420-desc">
        <p class="420-p">420</p>
        <p>ver eventos</p>
        </div>
    </li>
    <li class="e3">
        <img src="img/eventos3.png">
        <div class="cadet-desc">
        <p class="cadet-p">Cadet</p>
        <p>ver eventos</p>
        </div>
    </li>
    <li class="e4">
        <img src="img/eventos4.png">
        <div class="F18-desc">
        <p class="F18-p">F18</p>
        <p class="ver-eventos">ver eventos</p>
        </div>
    </li>
    <li class="e5">
        <img src="img/eventos5.png">
        <div class="J24-desc">
        <p class="J24-p">J24</p>
        <p>ver eventos</p>
        </div>
    </li>
    <li class="e6">
        <img src="img/eventos6.png">
        <div class="Laser-desc">
        <p class="Laser-p">Laser</p>
        <p>ver eventos</p>
        </div>
    </li>
    <li class="e7">
        <img src="img/eventos7.png">
        <div class="Od27-desc">
        <p class="Od27-p">Od27</p>
        <p class="ver-eventos">ver eventos</p>
        </div>
    </li>
    <li class="e8">
        <img src="img/eventos8.png">
        <div class="Paraolimpicos-desc">
        <p class="Paraolimpicos-p">Paraolimpicos</p>
        <p>ver eventos</p>
        </div>
    </li>
    <li class="e9">
        <img src="img/eventos9.png">
        <div class="Optimist-desc">
        <p class="Optimist-p">Optimist</p>
        <p>ver eventos</p>
        </div>
    </li>
    </ul>
</section>
    <footer></footer>

</body>

Answer 1

这里有一些有趣的事情... p 元素上有默认边距，在它们之间提供了额外的垂直 space，因此被删除了。然后在 div 本身上添加了一些填充以提供垂直空间。因为 li 中也有图像，额外的换行符会在图像下方显示一些不需要的边距。这就是 line-height: 0 的用途。然后为 p 元素重新定义它。包含交替背景（请参阅评论，演示时颜色略有不同）：

Demo

li {
line-height: 0;
}

li div {
padding: 25px 0;
}

li:nth-of-type(odd) div {
background: blue;
}

li:nth-of-type(even) div {
background: grey;
}

li div p {
line-height: 20px;  
margin: 0;
}

垂直对齐 css 无效 html

Vertical align css not working html

html

css

vertical-alignment