Question

在我的HTML中，我有一个div，它有三个div作为孩子。我想让第二个和第三个孩子（这是一个文本和按钮）在中间对齐。

<div class='border'>    
    <div class='inline-block some-image'> <!-- background image here --> </div>
    <div class='inline-block description'> Some Text</div>
    <div class='inline-block button'> <button></button> </div>
<div>

我的CSS

.border {
  border: 1px solid;
}

.inline-block {
  display: inline-block;
}
.some-image {
  height: 100px;
  width: 29%;
  display: inline-block;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  vertical-align: top;
}
.description {
  width: 25%;
  vertical-align: middle;
}
.button {
  width: 25%;
  vertical-align: middle;
}

这三个div是内联块，因此它们保持在同一行。但是如果第一个孩子（.someImage）不是vertical-align：middle，那么下面的孩子不会在中间对齐。
如果我只是将第一个切换到垂直对齐中间，那么它们工作正常......任何人都可以向我解释这个吗？是否所有的孩子都必须在中间对齐，或者我可以选择在顶部或底部对齐吗？

示例未在中间对齐：http://plnkr.co/edit/1ieeKiDiGjwlQuOojQ3C?p=preview
在中间对齐的示例：http://plnkr.co/edit/GIHjclutVGtiIiSR305n?p=preview

Answer 1

按钮，图像和描述对齐在一起，而不是由父母对齐。因此，当您将图像对齐在顶部时，其他元素对齐可分离性，并且它们对齐在中间。所以他们工作正常。

垂直对齐：中间 - 为什么第一个项目必须对齐中间？

1 个答案: