将两个并排元素彼此垂直对齐 [英] Vertically align two side by side elements to each other

问题描述

我并排有两个元素：图表和数据表。 DataTable可以通过与页面交互来更改大小，并且在调整窗口大小时，图表应该更改大小。我希望身材矮小的人总是以身材较高的那个为中心，即他们所在的div的当前高度。如果可能，我希望仅在CSS中完成此操作。这个答案似乎对我不起作用： CSS-在div中垂直对齐两个或多个（并排）元素;

I have two elements side by side: a chart and a DataTable. The DataTable can change size from interacting with the page and the chart should change size when the window is resized. I want the shorter one to always centre itself with the taller one i.e. the current height of their containing div. I'd like it to be done in CSS only, if possible. This answer doesn't seem to work for me: 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;
}

推荐答案

您不能使用float并同时内联阻止。我会尝试删除浮点数。

You can't use float and inline block at the same time. I'd try removing the floats.

然后，这是重置内联块元素之间的空白的问题。

Then it's a matter of reseting the whitespace between the inline block elements.

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

这篇关于将两个并排元素彼此垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！