How can I vertically align 3 divs in differents containers - html

Question

I want to align vertically 3 'title' divs. When the title is one word it must to be in the middle, when is longer must automatically align.
One example of what I want to achieve: http://jsfiddle.net/526TD/4/
My problem is that I have my divs in differents containers and not in a same div.
My HTML
<div class="related_news_filter">
<a href="/news/1">
<div class="round-image"></div>
<div>
<div class="title">title</div>
</div>
</a>
<a href="/news/2">
<div class="round-image">title longeeer</div>
<div>
<div class="title">title 2</div>
</div>
</a>
<a href="/news/3">
<div class="round-image"></div>
<div>
<div class="title">title with more words</div>
</div>
</a> </div>
My css
a {
display: inline-block;
width: 81px;
margin: 0 27px 0 8px;
}
.title {
margin-top: 7px;
width: 96px;
text-transform: uppercase;
line-height: 16px;
}
What I see now:
The word "new" and "inbound" are in the first line and not in the middle. They are not correctly vertical aligned.

Answer 1

Just give vertical-align: middle; to a
a {
display: inline-block;
width: 81px;
margin: 0 27px 0 8px;
vertical-align: middle;
}
.title {
margin-top: 7px;
width: 96px;
text-transform: uppercase;
line-height: 16px;
}
<div class="related_news_filter">
<a href="/news/1">
<div class="round-image"></div>
<div>
<div class="title">title</div>
</div>
</a>
<a href="/news/2">
<div class="round-image">title longeeer</div>
<div>
<div class="title">title 2</div>
</div>
</a>
<a href="/news/3">
<div class="round-image"></div>
<div>
<div class="title">title with more words</div>
</div>
</a> </div>

Answer 2

Flexbox can do that....
Support is IE10 and up.
.related_news_filter {
display: flex;
margin: 1em auto;
width: 80%;
justify-content: center;
}
a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 0 0 96px;
margin: 0 27px 0 8px;
text-decoration: none;
}
.round-image {
display: flex;
justify-content: center;
align-items: center;
width: 81px;
flex: 0 0 81px;
margin-bottom: 1em;
background: #000;
border-radius: 50%;
color: white;
}
.title {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-transform: uppercase;
}
<div class="related_news_filter">
<a href="/news/1">
<div class="round-image">title</div>
<div class="title">title</div>
</a>
<a href="/news/2">
<div class="round-image">title longeeer</div>
<div class="title">title 2</div>
</a>
<a href="/news/3">
<div class="round-image">title</div>
<div class="title">title with more words</div>
</a>
</div>
Note: This is not actually aligning the "titles" to one another. It merely lays out all the contents of the link 'containers' in the same way after making them all the same height.

Answer 3

There are many ways of doing this. The best method accroding to me would be to use the display:table method. Check the below fiddle -
http://jsfiddle.net/526TD/29/
.related_news_filter {
display: table;
}
a {
display: table-cell;
position: relative;
width: 81px;
margin: 0 27px 0 8px;
vertical-align: middle;
}
.title {
margin-top: 7px;
width: 96px;
text-transform: uppercase;
line-height: 16px;
text-align: center;
}
for more methods of achieving this go to the link -http://www.jakpsatweb.cz/css/css-vertical-center-solution.html