如何在不使用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

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

Answer 2

您可以使用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;
  }
}

<代码>垂直对齐：中间< /代码>使所有东西在中间也垂直对齐。

这是一支密码笔，你可以看到