html - 如何垂直对齐不同容器中的 3 个 div

Question

我想垂直对齐 3 个“标题”div。当标题是一个单词时必须在中间，当标题较长时必须自动对齐。 我想要实现的一个例子:http://jsfiddle.net/526TD/4/

我的问题是我的 div 在不同的容器中，而不是在同一个 div 中。

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

我的CSS

a {
 display: inline-block;
 width: 81px;
 margin: 0 27px 0 8px;
}
.title {     
  margin-top: 7px;
  width: 96px;
  text-transform: uppercase;
  line-height: 16px;
}

我现在看到的:

“new”和“inbound”这两个词在第一行，而不是在中间。它们未正确垂直对齐。

Answer 1

只要给 vertical-align: middle; 给 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>