CssSY CssSY - 19 days ago 7
CSS Question

Perfect way to align div next to image

I have two divs. First one has a image file and the other one has a username. I just want to align the second div vertically center just like this way.

enter image description here

But this one is not aligned perfectly. This screen already coded but the problem is that I still couldn't figure out the perfect way to align middle the user name div. I just use my naked eye and adjust padding.

Here is the my code

.tag-header {
padding: 12px;
overflow: auto;
}
.tag-header .tag-header-img {
height: 55px;
width: 55px;
border-radius: 50%;
float: left;
}

.tag-header .info {
padding: 14px 11px;
display: inline-block;
font-size: 1.3rem;
line-height: 14px;
}

.tag-header .info p {
margin: 0;
font-weight: 600;
line-height: 1;
font-size: 1.3rem;
}
.tag-header .time {
display: block;
font-size: 1.2rem;
}
.info span {
font-weight: 300;
color: #b9b9b9;
}

<div class="tag-header">
<div class="col-md-6">
<div class="row">
<img class="tag-header-img" src="http://blog.couchbase.com/binaries/content/gallery/speakers/kirkk.jpg" alt="">
<div class="info">
<p>John Stevens</p>
<span class="time">2 minutes ago</span>
</div>
</div>
</div>


fiddle

Any solution?

Answer

Heres your fiddle updated https://jsfiddle.net/p4x7d3fq/5/ -- i added borders just so you can see.

Using display:table-cell you can achieve this, if you don't mind the slight changes, including the addition of a height to match that of your image.