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