html - 将 div 与左浮动父级垂直对齐

Question

我需要将一个 div 垂直居中。
特殊之处在于父级向左浮动并且没有定义高度...

我有以下内容:

#parent {
    background:bisque;
    float: left; /*not to change*/
}
#parent div {
    display:inline-block;/*not to change*/
}
#foo {
    background:aliceblue;
    width: 100px;
    vertical-align: middle;
}
#bar { /*not to change*/
    width:150px;
    height:100px;
    background:lightgreen;
    padding:10px;
}

<div id="parent">
    <div id="foo">Child Foo</div>
    <div id="bar">Child Bar</div>
</div>

1) 如何让Foo垂直居中？
2) 为什么Bar的填充会影响Foo？

Answer 1

所以这里是你的答案:

1. 将 vertical-align 添加到 bar 以居中 foo。较大的元素采用正确的垂直对齐方式。
2. 两者都是 inline-block; 所以默认的 vertical-align 用于 baseline。

片段

#parent {
  background:bisque;
  float: left; /*not to change*/
}
#parent div {
  display:inline-block;/*not to change*/
}
#foo {
  background:aliceblue;
  width: 100px;
  vertical-align: middle;
}
#bar { /*not to change*/
  width:150px;
  height:100px;
  background:lightgreen;
  padding:10px;
  vertical-align: middle;
}

<div id="parent">
  <div id="foo">Child Foo</div>
  <div id="bar">Child Bar</div>
</div>