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

Question

我想垂直对齐 3 'title' divs。当标题是一个单词时必须在中间，当标题较长时必须自动对齐。我想要实现的一个例子：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>

Answer 2

有很多方法可以做到这一点。对我来说最好的方法是使用 display:table 方法。检查以下 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;
}

有关实现此目的的更多方法，请访问 link -http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 3

Flexbox 可以做到....

支持 IE10 及更高版本。

.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>

注意：这实际上并不是 "titles" 彼此对齐。它只是以相同的方式在之后布置 link 'containers' 的所有内容，使它们的高度相同。

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

How can I vertically align 3 divs in differents containers

html

css

alignment