如何將div元素與文本以外的內容垂直居中對齊

Question

我很沮喪 我試圖弄清楚如何垂直對齊div與邊框，與圖像的div的右側。 普遍的問題是如何使任何div垂直居中對齊任何其他div。 不只是div的文本內容。 我在這里看到了很多潛在的解決方案，但沒有一個可行。

對於一個表，這幾乎是微不足道的，但是我們不應該再使用表來定位。 我正在尋找一種避免使用表格的方法。 我找不到。 引用不使用表進行定位的原因之一是表的混亂程度。 我得到那些專家的消息。 它比嘗試使用div可能更令人困惑。

我有兩個示例頁面。 標題反映了我當前的態度，這就是為什么在工作時不使用桌子嗎？

http://popnowlin.com/whynot.html

<style type="text/css">
.mybox {
    display:inline-block;
    margin:0px 1em;
    padding:1em;
    border-style:solid;
}
</style>
...
<table style="width:100%">
  <tr>
    <td>
      <img alt="" src="http://angelichomeservices.com/AHS.jpg" width=315 />
    </td>
    <td>
      <div class=mybox>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </td>
  </tr>
</table>
...
<div style="width:100%;">
    <img alt="" src="http://angelichomeservices.com/AHS.jpg" width=315 />
  <div class=mybox style="width:calc(100% - 315px - 4em - 6px);float:left;vertical-align:middle;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

最重要的例子是使用表格，它確實滿足我的要求。 我可以縮小或放大頁面的寬度，並且其中包含文本的div會縮小和放大，並保持在圖像的垂直居中位置。

最下面的示例是我嘗試使用div進行定位，但是我所能做的就是使兩者在頂部垂直對齊。 另外，必須在CSS中使用calc（）可能不是解決任何問題的最安全方法。

有人對此有解決方案嗎？ 隨意獲取代碼並發瘋。 提前致謝。

Answer 1

CSS表似乎是一個解決方案。

JSFiddle演示

 .parent { display: table; } .child { display: table-cell; vertical-align: middle; border: 1px solid grey; } 

 <div class="parent"> <div class="mybox child"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <img class="child" alt="" src="http://angelichomeservices.com/AHS.jpg" /> </div>