Question

我想垂直对齐3＆＃39;标题＆＃39; 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;
}

我现在看到的：

这个词＆＃34; new＆＃34;和＆＃34;入境＆＃34;在第一行，而不是在中间。它们没有正确垂直对齐。

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

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>

注意：这实际上并不是将“标题”彼此对齐。它只是以之后的相同方式列出链接'容器'的所有内容，使它们具有相同的高度。

Answer 3

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

有关实现此目标的更多方法，请转到链接 - http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

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

3 个答案: