Question

This is my fiddle. I can’t vertically center the texts Name1, Name2 and the time text. I did try with display: table-cell; vertical-align: middle; but it didn’t help. Can you point me where am I doing it wrong?

html:

<div style="height: 15%;">
    <div class="timeDiv">
        <span class="time">19:00</span>
    </div>

    <div class="titleDiv">
            <img src="" alt="test1 img">                        
        <span class="title">Name 1</span>
    </div>            

    <div class="titleDiv">                                        
        <img src="" alt="test2 img">
        <span class="title">Name2</span>
    </div>
</div>

css:

img{
    height: 80%; 
    float:left; 
    margin-left: 7%;
    margin-right: 1%;   
}

.timeDiv{
    float: left; 
    width:10%;
}

.titleDiv{
    float: left; 
    width: 45%;            
}

.title{
    font-size: 2em;
    float: left;
}

.time{
    font-size: 1.5em;
    float: right;
}

Answer 1

Have a look here 🙂 http://phrogz.net/css/vertical-align/index.html

It explains why not to use vertical-align: middle for block level elements and shows you how to do what you want (near the bottom of the page).

The problem here is three-fold:

HTML layout traditionally was not designed to specify vertical behavior. By its very nature, it scales width-wise, and the content flows to an appropriate height based on the available width.

Traditionally, horizontal sizing and layout is easy; vertical sizing
and layout was derived from that. The reason vertical-align:middle
isn’t doing what is desired want is because the author doesn’t
understand what it’s supposed to do, but …

… this is because the CSS
specification really screwed this one up (in my
opinion)—vertical-align is used to specify two completely different
behaviors depending on where it is used.

I believe method 1 will do what you want.