Float: left. Как сдвинуть текст внутри float чуть ниже?

Question

[Ejex Xeffer]

Начал изучать верстку, скачал с сайта psd (https://dribbble.com/shots/1704150-TRIGONUM-free-p... и сел верстать.
Все шло как по маслу, но блок BLOG какой то адовый, я сделал все через float, но хотелось бы понять как сделать по уму.
Надо подвинуть дату чуть ниже, так чтобы она была по средней линии картинки. При попытке padding ничего не получается так как должно быть.
Может я вовсе не прав с этим float и это надо делать иначе? Верстаю с bootstrap (используя разве что сетку)

<div class="col-xs-4">
                    <div>
                        <img src="img/blog_1.jpg" class="img-responsive"alt="">
                        <div class="content">
                            <div class="calendar blue">
                                <img src="img/calendar.png" alt="">
                                <span>08 / 28 / 2014</span>  
                            </div>
                            <div class="comments blue-white">    
                                <a href="">
                                    <img src="img/comments.png"onmouseover="this.src='img/comments_red.png'"onmouseout="this.src='img/comments.png'"alt="">
                                </a>
                                <span class="comments--text"><b>0</b></span>  
                            </div><br>
                            <h2>Ut nec sodales lorem</h2>
                            <p>Cras massa nulla, cursus quis purus eu, varius <br>feugiat urna. Praesent vulputate placerat turpis,<br>nec fringilla turpis sollicitudin at. Phasellus<br>convallis quam eget risus ultricies dignissim.</p>
                        </div>                          
                    </div>                                             
                </div>

.calendar {
    position: relative;
    float: left;
    text-align: middle;
}

.calendar  > span{
    position: inherit;
    clear: both;
    padding-top: 5px;
}

.comments {
    float: right;
}

.comments--text:hover {
    color: #e24558;
}
 
.comments > a{
    text-decoration: none;
}

Answer 1

[Ivan Bogachev]

Попробуйте добавить vertical-align к вашей картинке

<div class="calendar blue">
    <img style="vertical-align:middle" src="img/calendar.png" alt="">
    <span>08 / 28 / 2014</span>  
</div>

Comments

[Ejex Xeffer]

Все получилось. Большое спасибо!

Answer 2

[valackar]

А зачем вам position?? что то никак не въеду

Comments

[Ejex Xeffer]

Просто одна из тысяч попыток. В конечном виде все убрал уже)