如何在不使用 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类似的答案，但这里的红色背景也根据问题中的图像保留。

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

如何在不使用 flexbox 的情况下垂直对齐两个响应式 div？

How to align two responsive divs vertically without using flexbox?

css

vertical-alignment

responsive-design