将两个并排元素垂直对齐

Question

我有两个并排的元素：图表和数据表。 DataTable 可以通过与页面交互来改变大小，并且图表应该在调整窗口大小时改变大小。我希望较短的始终以较高的为中心，即包含 div 的当前高度。如果可能的话，我希望它只在 CSS 中完成。这个答案似乎对我不起作用：CSS - vertically align two or more (side by side) elements in a div;

我有以下几点：

<div id="container">
    <svg id="chart"></svg>
    <div id="dataTable"></div>
</div>

CSS：

#container {
    height: 50%;
    width: 80%;
    margin: 0 auto;
}

#chart {
    overflow: hidden;
    float: left;
    width: 50%;
    display: inline-block;
}

#dataTable {
    overflow: hidden;
    float: left;
    width: 50%;
    display: inline-block;
}

Answer 1

您可以尝试使用 Flexbox。对齐项目将确保项目保持居中。

小提琴：https://jsfiddle.net/yftaLtxr/

HTML

<div id="container">
    <svg id="chart">a</svg>
    <div id="dataTable">b</div>
</div>

CSS

#container {
    height: 50%;
    width: 80%;
    margin: 0 auto;
    display:flex;
    align-items:center;
}

#chart {
    height:50vh;
    overflow: hidden;
    float: left;
    width: 50%;
    display: inline-block;
    background-color:#f00;
}

#dataTable {
    overflow: hidden;
    float: left;
    width: 50%;
    display: inline-block;
}

Answer 2

您不能同时使用浮动块和内联块。我会尝试移除浮动。

然后就是重置内联块元素之间的空白。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid green;
  font-size: 0;
  /* whitespace fix */
}
#container > * {
  font-size: 1em;
  /* reset font-size */
}
#chart {
  width: 50%;
  display: inline-block;
  vertical-align: middle;
  background: red;
  height: 50px;
}
#dataTable {
  width: 50%;
  display: inline-block;
  vertical-align: middle;
  height: 150px;
  background: blue;
}

<div id="container">
  <svg id="chart"></svg>
  <div id="dataTable"></div>
</div>