垂直对齐父元素以排列中间子元素

Question

我有内容块，每个内容块包含标题，图像和副本。我需要垂直对齐块，以便图像在同一行中排列。

下面的代码说明了我的布局中断的宽度。我不能在不破坏行间距的情况下制作标题或复制固定高度。我无法将标题或副本放在自己的行中，因为标题图像和副本必须在块流到新行时保持在一起。

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.container {
  font-family: 'lato', sans-serif;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.block {
  flex-basis: 190px;
  flex-grow: 1;
}

h3 {
  font-size: 20px;
  letter-spacing: .5px;
  text-align: center;
  width: 90%;
  margin: 0 auto .5em auto;
}

img {
  display: block;
  width: 90%;
  max-width: 225px;
  margin: 0 auto;
}

p {
  font-size: 16px;
  letter-spacing: .5px;
  text-align: center;
  width: 85%;
  /* height: 4.75em; */
  margin: .25em auto 0 auto;

<div class="container">
  <div class="block">
    <h3>The Title One</h3>
    <img src="http://via.placeholder.com/225">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
  </div>
  <div class="block">
    <h3>The Title Two</h3>
    <img src="http://via.placeholder.com/225">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
  <div class="block">
    <h3>The Longer Title Three</h3>
    <img src="http://via.placeholder.com/225">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>

Answer 1

单独的CSS不能垂直对齐图像，因为各个块不相关 - 一个标题不知道另一个是多高。正如你所注意到的，上面的答案是对问题的合理刺，但不是非常强大。

如果你可以使用CSS Grid，你可以走得更近，但是你会失去flex行的包装行为。

我想不出除JavaScript解决方案之外的任何东西：找出哪些块在同一行，测量哪个标题是最高的，并将该高度分配给其他块。

另一种方法可能是改变设计，例如通过将标题移动到图像下方。毕竟，对齐这些图像同时具有高于它们的任意长度的标题似乎是一种奇怪的约束组合。

Answer 2

我认为align-items: center和justify-content: center会帮助你。

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.container {
  font-family: 'lato', sans-serif;
  max-width: 600px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.block {
  flex-basis: 190px;
  flex-grow: 1;
}

h3 {
  font-size: 20px;
  letter-spacing: .5px;
  text-align: center;
  width: 90%;
  margin: 0 auto .5em auto;
}

img {
  display: block;
  width: 90%;
  max-width: 225px;
  margin: 0 auto;
}

p {
  font-size: 16px;
  letter-spacing: .5px;
  text-align: center;
  width: 85%;
  /* height: 4.75em; */
  margin: .25em auto 0 auto;

<div class="container">
  <div class="block">
    <h3>The Title One</h3>
    <img src="http://via.placeholder.com/225">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
  </div>
  <div class="block">
    <h3>The Title Two</h3>
    <img src="http://via.placeholder.com/225">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
  <div class="block">
    <h3>The Longer Title Three</h3>
    <img src="http://via.placeholder.com/225">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>