垂直对齐css不起作用html答案

【问题标题】：Vertical align css not working html垂直对齐css不起作用html
【发布时间】：2015-09-27 09:12:01
【问题描述】：

我正在做这个页面。我想垂直对齐显示 Od27, ver eventos(its a

，在 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>

【问题讨论】：

这里有两种简单的 div 垂直居中方法：*.com/a/31977476/3597276
有什么可以垂直对齐 - div 本身的第一个文本？
该 div 内的文本。
可能是这样的，@Franco Marziano？ jsfiddle.net/yc61ge2j
是的！我打算发布我想要的图片，因为我有 psd 文件。

标签： css html vertical-alignment

【解决方案1】：

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

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

【讨论】：

但我希望文本位于图像下方，垂直居中，白色背景。而在 e2、e4、e6 和 e8 div 中，背景为灰色。