Vertical align css not working html

Question

I have this page I´m doing. I want to vertical-align the text that says Od27, ver eventos(its a

, inside a div). The css is in the jsfiddle page.

I cant solve it. I saw other posts from other people and tried to solve it with that and nothing.

Here´s the code: http://jsfiddle.net/8c5d2pek/

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

Here are two simple methods for vertically centering divs: http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Sep 27 '15 at 00:03
What's there to vertically align exactly - the first text inside that div itself? — Shikkediel, Sep 27 '15 at 00:26
Something like this then maybe, @Franco Marziano? http://jsfiddle.net/yc61ge2j/ — Shikkediel, Sep 27 '15 at 00:41
Yes! I was going to post an image of what I want, because I have the psd file. — Franco Marziano, Sep 27 '15 at 00:45
But, then I want to add some background colors to some of that divs, and it doesnt look so good. — Franco Marziano, Sep 27 '15 at 00:50
Something like this, but for all the div. http://jsfiddle.net/yc61ge2j/ without the margin — Franco Marziano, Sep 27 '15 at 00:54
I want to have the same height but in some of the divs(420, laser, f18 and paraolimpicos) i want a grey background without the margin, and vertically align. — Franco Marziano, Sep 27 '15 at 01:05

Shikkediel · Accepted Answer · 2015-09-27T01:12:01.147

A few things of interest here... the p elements had default margin on them, giving extra vertical space between them so that got removed. Then some padding was added on the div itself to give vertical room. Because there's an image inside li as well, an extra line break would show some undesired margin beneath the image. That's what line-height: 0 is for. It is then redefined for the p elements. Alternating background included (see comments, colors a bit different for demonstration) :

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

But I want the text to be under the image, vertically centered with a white background. And in the e2, e4, e6 and e8 divs the background to be grey. — Franco Marziano, Sep 27 '15 at 00:24

Vertical align css not working html

1 Answers1