如何不使用flexbox垂直对齐两个响应div？

Question

我正在尝试将两个div与响应式设计并排使用。左div包含随页面大小变化的图像。右div包含一个不会更改的菜单。当页面达到特定大小（太小）时，菜单应该位于图像下方并停留在中间）。

但是它也需要在左div的中间垂直对齐。

应在更大的屏幕上垂直居中放置

它当前可以在较小的屏幕上正常工作：

这是我的HTML：

<div id="container">
        <div id="content">
            <div class="row">
              <div class="column" style="background-color:#aaa;">
                <img class="header-img" sr="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
          </div>
          <div class="column" style="background-color:#bbb;">
            <table style="width:100%">
              <tr>
                <td>Menu</td>
                <td>Menu</td> 
                <td>Menu</td>
                <td>Menu</td>
              </tr>
              </table>
              <table style="width:100%">
              <tr>
                <td>Menu</td>
                <td>Menu</td> 
                <td>Menu</td>
                <td>Menu</td>
                <td>Menu</td>
              </tr>
            </table>
    </div>
</div>

这是我的CSS：

    #content {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
        background-color:red;
    }

    * {box-sizing: border-box;}

    body { 
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    /* Create two equal columns that floats next to each other */
    .column {
      float: left;
      width: 50%;
      padding: 10px;
    }

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
      }
    }

    .header-img {
        width: 100%;
        max-width: 500px;
    }

    td {
        text-align: center;
    }

我尝试了所有方法，但是其他所有常规对齐方法都破坏了其他所有方法。

Answer 1

您可以使用display:table和display:table-cell。

.row{
  display:table;
  width:100%;
}

.column {
  display:table-cell;
  vertical-align:middle;
  width: 50%;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display:block;
  }
}

vertical-align:middle也使所有内容在中间垂直对齐。

这里是CODE PEN，所以您可以看到

Answer 2

类似于jleggio的答案，但是根据问题中的图像，红色背景仍然存在。

 finally {
        chromeDriver.close()
        chromeDriver.quit()
    }

* {box-sizing: border-box;}

body { 
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#container {
	display: table;
	width: 100%;
}

#content {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	background-color: red;
}

.cell {
	width: 50%;
	display: table-cell;
	vertical-align: middle;
}


@media screen and (max-width: 600px) {
	.cell {
	    width: 100%;
		display: block;
	}
}

.header-img {
	width: 100%;
	max-width: 500px;
}

td {
    text-align: center;
}