如何反应的两个div的垂直对齐，而无需使用Flexbox的？

Question

我试图通过侧响应式设计使用两个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，但这里的红色背景根据问题的图像也依然存在。

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

<div id="container">
	<div id="content">
		<div class="cell" style="background-color: #aaa;">
			<img class="header-img" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
		</div>
		<div class="cell">
			<div 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>
	</div>
</div>