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

我认为align-items: center和justify-content: center会对您有所帮助。

＆＃13;

@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;

＆＃13;

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

＆＃13;

Answer 2

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

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

除了JavaScript解决方案之外我什么都想不到：弄清楚哪些块在同一行，测量哪个标题是最高的，并将该高度分配给其他标题。

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

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

2 个答案: